<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>校验输入框输入字符的数量</title>
<!--
参考: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
-->
<style>
/*reset*/
* { margin: 0; padding: 0; color: #323232; }
dl { font: normal 12px tahoma,arial,helvetica,sans-serif; width: 400px; height: 300px; margin: 20px auto; }
/*hint*/
.hint { background-color: #FFFAB1; border: dotted 1px #F7AB00; line-height: 24px; font-size: 14px; padding: 3px; }
.hint p { float: right; }
/*comment*/
.commentBox { padding-top:6px; }
#comment { width: 398px; height: 100px; font-size: 18px; font-family: tahoma,arial,helvetica;}
/*button*/
.buttonBox input { background: none; border: none 0; width: 48px; height: 24px; line-height: 24px; border: solid 1px #848484; background-color: #eeeeee; margin-right: 20px; margin-top: 12px; }
.buttonBox p { float: right; }
input.noMarginRight { margin-right: 0px; }
</style>
<script>
var comment = null;
var defaultValue = "无相关备注信息。"
var maxSize = 100;
window.onload = function() {
init();
}
function $(id) {
return document.getElementById(id);
}
function init() {
comment = $("comment");
comment.innerHTML = defaultValue;
comment.onclick = function() {
if (defaultValue != comment.innerHTML) {
return;
};
comment.innerHTML = "";
}
comment.onblur = function() {
if (defaultValue == comment.innerHTML || "" != comment.innerHTML) {
return;
};
comment.innerHTML = defaultValue;
}
$("clear").onclick = function() {
comment.innerHTML = "";
}
$("default").onclick = function() {
comment.innerHTML = defaultValue;
}
$("cancel").onclick = function() {
// do something
}
$("save").onclick = function() {
// do something
}
}
function onPropertyChanged(event) { // for IE8 and below
if (event.propertyName.toLowerCase() == "value") {
validateInput();
}
}
function onInputChanged(event) { // for IE9 and others
validateInput();
}
function validateInput() {
var content = comment.value;
if (content.length > maxSize) {
comment.value = comment.value.substring(0, maxSize);
return;
}
$("totalInputCharNumbers").innerHTML = content.length;
}
</script>
</head>
<body>
<dl>
<dt class="hint">备注信息最多支持录入100个汉字。<p><b id="totalInputCharNumbers">0</b>/100</p></dt>
<dd class="commentBox">
<textarea id="comment"
οninput="onInputChanged(event)"
onpropertychange="onPropertyChanged(event)"></textarea>
</dd>
<dd class="buttonBox">
<input type="button" id="default" value="默认" /><!--
--><input type="button" id="clear" value="清空" />
<p>
<input type="button" id="save" value="确定" />
<input type="button" id="cancel" value="取消" class="noMarginRight"/>
</p>
</dd>
</dl>
</body>
</html>
校验输入框输入字符的数量
最新推荐文章于 2022-10-18 16:17:00 发布