textarea限制输入长度
?
????? 最近公司的項(xiàng)目客戶在使用時(shí)報(bào)錯(cuò)，研究后發(fā)現(xiàn)，textarea輸入框，輸入值的長度超過了數(shù)據(jù)庫中定義的長度，所以造成了，前臺(tái)的錯(cuò)誤，因此要對(duì)前臺(tái)輸入框的輸入的長度進(jìn)行限制；經(jīng)過研究后發(fā)現(xiàn)，一下幾種方法可以較好地解決問題：
?備注：其實(shí)對(duì)于數(shù)據(jù)長度的驗(yàn)證，我們可以在提交前，以及提交后進(jìn)行驗(yàn)證，但是我們的這個(gè)出現(xiàn)問題的，由于某些原因是不能在提交后進(jìn)行驗(yàn)證，所以我研究了下幾種前臺(tái)驗(yàn)證的方式，供以后有需要的同志參考。
第一種：
其實(shí)最簡單的方式是：在submit提交前進(jìn)行這樣的if判斷，不用js驗(yàn)證即可，而且較為直觀
if(document.getElementById("textarea的id的名字").value.length >200){
???alert您輸入的字?jǐn)?shù)超出限制，最多錄入200個(gè)字。");
???return false;
??}
第二種：
<html>
??? <head>
??????? <title>
??????? </title>
??????? <script type="text/javascript">
??????????? var textarea_maxlen = {
??????????????? isMax: function(max_length) {
??????????????????? var textarea = document.getElementById("area");
??????????????????? if (textarea.value.length > max_length) {
??????????????????????? textarea.value = textarea.value.substring(0,max_length);
??????????????????? }
??????????????? },
??????????????? disabledRightMouse: function() {
??????????????????? document.oncontextmenu = function() {
??????????????????????? return false;
??????????????????? }
??????????????? },
??????????????? enabledRightMouse: function() {
??????????????????? document.oncontextmenu = null;
??????????????? }
??????????? };
??????? </script>
??? </head>
??? <body>
?請(qǐng)輸入內(nèi)容：
??????? <br><textarea id="area"? οnkeyup="textarea_maxlen.isMax(10)" οnfοcus="textarea_maxlen.disabledRightMouse()"
??????? οnblur="textarea_maxlen.enabledRightMouse()" >
??????? </textarea>
??? </body>
</html>
總結(jié)：這種方法在輸入達(dá)到最大限制后，是無法輸入進(jìn)去，較為合理的解決了這樣的問題
第三種：
<html>
<head>
<title>限制Textare輸入數(shù)值的個(gè)數(shù)</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<script language="JavaScript">???
function textCounter(field, countfield, maxlimit) {???
?// 函數(shù)，3個(gè)參數(shù)，表單名字，表單域元素名，限制字符；???
?if (field.value.length > maxlimit)???
?//如果元素區(qū)字符數(shù)大于最大字符數(shù)，按照最大字符數(shù)截?cái)?#xff1b;???
?fieldfield.value = field.value.substring(0, maxlimit);???
?else???
?//在記數(shù)區(qū)文本框內(nèi)顯示剩余的字符數(shù)；???
?countfield.value = maxlimit - field.value.length;???
}???
</script>
?</head>
??<body>
???<form name=myform action="">
????? <textarea name="message" cols="28" rows="5"
?????? onKeyDown="textCounter(this.form.message,this.form.remLen,10);"
?????? onKeyUp="textCounter(this.form.message,
?????? this.form.remLen,10);">
????</textarea>
????? 您還可以輸入:<input name="remLen" type="text" value="10" size="3" readonly="readonly">個(gè)字符?
???</form>
?</body>
</html>
總結(jié)：這種方法可以較為直觀的顯示出輸入框中還能輸入多少字符。
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/fengtengfei/p/fengtengfei.html
總結(jié)
以上是生活随笔為你收集整理的textarea限制输入长度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows下用QTwebkit解析h
- 下一篇： firebug中html显示为灰色的原因