输入框事件简单整理
不扯了直接上代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.input_test {
color: #999;
}
</style>
<title>onput</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function OnInput(event) {
var srtext = event.target.value;
var srttextl = srtext.length;
var num = 10;
if (srttextl > 10) {
window.alert("输入字符不能超过11位")
return false
}
document.getElementById('spannr').innerHTML = num - srtext.length;
}
//兼容ie6\7\8
function OnPropChanged(event) {
var srtext = event.srcElement.value;
var srttextl = srtext.length;
var num = 10;
if (srttextl > 10) {
window.alert("输入字符不能超过11位")
return false
}
document.getElementById('spannr').innerHTML = num - srtext.length;
}
</script>
<script type="text/javascript">
$(function() {
$('.input_test').bind({
focus: function() {
if (this.value == this.defaultValue) {
this.value = '';
$(this).css("color","#000");
}
},
blur: function() {
if (this.value == '') {
this.value = this.defaultValue;
$(this).css("color","#999");
}
}
});
})
</script>
</head>
<body>
输入框测试
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="搜索关键字" class="input_test" />
<span>还可以输入：<em id="spannr">10</em></span>
<input type="text" style="color:#999;" />
</body>
</html>
