小例子：通用模块——文本框默认提示信息
因为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(/ /g, ''); s = s.replace(/ /g, ''); s = s.replace(/ /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>
...