表单：文本框默认提示信息（小例子）

最新推荐文章于 2022-04-16 20:14:42 发布

weixin_30906185

最新推荐文章于 2022-04-16 20:14:42 发布

阅读量589

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/qq21270/p/5150472.html

版权

表单：文本框默认提示信息（小例子）

小例子：通用模块——文本框默认提示信息

因为H5的属性不兼容所有浏览器

<style>
.search-box input::-webkit-input-placeholder {color: #ddd;font-weight: normal;}
</style>
<input type="search" name="" placeholder="提示信息" />
<textarea rows="4" cols="50" placeholder="请介绍自己"></textarea>

所以PC端，有下面写法：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache"> 
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    var askDesign = {

        /* 表单输入框获取焦点、失去焦点 start */
        focusBlur: function(ele) {
            function trimCode(s) {
                s = $.trim(s);
                s = s.replace(/ /g, '');
                s = s.replace(/\t/g, '');
                s = s.replace(/\r/g, '');
                s = s.replace(/\n/g, '');
                return s;
            }
            for(var i=0;i<ele.length;i++){
                var _e = $(ele[i]);
                //取当前值，并替换掉两端空格、替换掉回车符， 检查是否和 data-value 属性的默认值 相同。
                var _val = trimCode(_e.val());
                if (_val == '') {
                    _e.val(_e.attr('data-value')); //初始化
                }
                _e.focus(function() {
                    var _val = $.trim($(this).val());
                    if ($(this).attr('data-value') == _val) {
                        $(this).val('');
                    }
                }).blur(function() {
                    var _val = $.trim($(this).val());
                    var _attrVal = $(this).attr('data-value');
                    if (_val == '') {
                        $(this).val(_attrVal);
                    }
                });
            }
        },
        /* 表单输入框获取焦点、失去焦点 end */

        /* 提交表单 start */
        submitQuestions: function() {//（实际是表单不提交，发ajax）

            $('.questions-form').submit(function() {
                var _textarea = $('.questions-form').find('textarea');
                var _str = $.trim(_textarea.val());
                var _len = _str.replace(/[^\x00-\xff]/g, '__').length;//每一个中文字，按两个英文字符计算长度

                if (_textarea.attr('data-value') == _str) {alert('请填写评论内容');return false;}
                if (_len < 10) {alert('内容过短，长度应在10-500个字之间');return false;}
                var comment = _str; //评论内容
                var targetUrl = '/ajax/';
                $.ajax({
                    type: 'get',
                    url: targetUrl,
                    data: {
                        action: 'addComment',
                        commentRole: commentRole,
                        commentRoleId: commentRoleId,
                        commentScore: commentScore,
                        comment: comment
                    },
                    dataType: 'jsonp',
                    json:'callback',
                    cache: false,
                    success: function(data) {
                        if (data.status) {
                            //当前页面URL
                            alert('评论成功');
                        } else {
                            alert(data.message); //添加失败，提示信息
                        }
                    },
                    error: function(data) {
                        alert('操作失败');
                    },
                });
                return false;
            });

        },
        /* 提交表单 end */
    });


askDesign.focusBlur($('.questions-form .textarea'));//textarea获取焦点
askDesign.focusBlur($('.questions-form .input'));//input获取焦点
askDesign.submitQuestions();
});
</script>
<style type="text/css">
.questions-form{margin:0 4%;}
.questions-form .input{padding:0.75em 1em;line-height:1;font-size:1.2rem;border-radius:2px;background:#fafafa;color:#999;border:1px solid #ececec;}
.questions-form .textarea{padding:1.1rem;line-height:1.666;font-size:1.2rem;border-radius:2px;background:#fafafa;color:#999;border:1px solid #ececec;}
.questions-form .select{padding:0.75em 1em;line-height:1;font-size:1.2rem;border-radius:2px;background:#fafafa;color:#999;border:1px solid #ececec;}
.questions-form .checkbox{padding:0.75em 1em;line-height:1;font-size:1.2rem;border-radius:2px;background:#fafafa;color:#999;-webkit-appearance: checkbox;}
.questions-form .width50{width:50%;}
.questions-form .btn{margin-top:5%;}
</style>
<form method="post" action="" class="questions-form">
    <p class="mt2"><input type="text" name="" maxlength="30" class="input form-full" data-value="XXX@163.com"></p>
    <p class="mt2"><input type="text" name="" maxlength="11" class="input form-full" data-value="手机"></p>
    <p class="mt2"><input type="text" name="" maxlength="30" class="input form-full" data-value="身份介绍"></p>
    <textarea name="" rows="13" cols="22" class="textarea form-full mt2" data-value="简介"></textarea>
    <input type="submit" value="提交"  class="btn btn-orange f18 form-full mt3">
</form>
</body>
</html>