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