表单：⽂本框默认提⽰信息（⼩例⼦）⼩例⼦：通⽤模块——⽂本框默认提⽰信息
因为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="cdn.bootcss/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 = _place(/[^\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/';
html内容文本框$.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 {
ssage); //添加失败，提⽰信息
}
},
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"></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>
...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。