小例子：通用模块——文本框默认提示信息
因为H5的属性 不兼容所有浏览器
<input type="search" name="" placeholder="提示信息" />
所以有下面写法：
<!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="[email protected]"></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>
...
时间： 2024-10-09 23:40:06