[英]How to impose maxlength on textArea in HTML using JavaScript
我想有一些功能,如果我寫
<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>
它會自動將最大長度強加在 textArea 上。 如果可能,請不要在 jQuery 中提供解決方案。
注意:如果我這樣做可以做到這一點:
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">
function imposeMaxLength(Event, Object, MaxLen)
{
return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}
復制自在 HTML 文本區域上模擬 HTML 輸入“maxlength”屬性的最佳方法是什么?
但關鍵是我不想在每次聲明 textArea 時都寫 onKeyPress 和 onKeyUp。
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA');
for(var i = 0, l = txts.length; i < l; i++) {
if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
var func = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if(this.value.length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
};
}
我知道您想避免使用 jQuery,但由於該解決方案需要 JavaScript,因此該解決方案(使用 jQuery 1.4)是最簡潔和健壯的。
受到 Dana Woodman 回答的啟發,但有所改進:
該答案的變化是:簡化且更通用,使用 jQuery.live 並且如果長度正常也不設置 val (導致 IE 中的箭頭鍵工作,以及 IE 中的顯着加速):
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});
編輯: jQuery 1.7+的更新版本,使用on
而不是live
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});
更新使用 Eirik 的解決方案,使用.live()
代替,因為它更健壯。
即使您想要一個不使用 jQuery 的解決方案,我想我也會為通過 Google 找到此頁面並尋找 jQuery 式解決方案的任何人添加一個:
$(function() {
// Get all textareas that have a "maxlength" property.
$('textarea[maxlength]').each(function() {
// Store the jQuery object to be more efficient...
var $textarea = $(this);
// Store the maxlength and value of the field.
var maxlength = $textarea.attr('maxlength');
var val = $textarea.val();
// Trim the field if it has content over the maxlength.
$textarea.val(val.slice(0, maxlength));
// Bind the trimming behavior to the "keyup" event.
$textarea.bind('keyup', function() {
$textarea.val($textarea.val().slice(0, maxlength));
});
});
});
希望這對您的 Google 員工有用...
HTML5 為textarea
元素添加了一個maxlength
屬性,如下所示:
<!DOCTYPE html>
<html>
<body>
<form action="processForm.php" action="post">
<label for="story">Tell me your story:</label><br>
<textarea id="story" maxlength="100"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
Chrome 13、FF 5 和 Safari 5 目前支持此功能。毫無疑問,IE 9 不支持此功能。(在 Win 7 上測試)
此解決方案避免了在 IE 中添加文本中間的字符時刪除最后一個字符的問題。 它也適用於其他瀏覽器。
$("textarea[maxlength]").keydown( function(e) {
var key = e.which; // backspace = 8, delete = 46, arrows = 37,38,39,40
if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;
return $(this).val().length < $(this).attr( "maxlength" );
});
然后,我的表單驗證會處理用戶可能粘貼的任何問題(僅在 IE 中似乎是一個問題)超過文本區域最大長度的文本。
這是我剛剛在我的網站上使用的一些經過調整的代碼。 改進了向用戶顯示剩余字符數。
(再次向不要求 jQuery 的 OP 道歉。但是說真的,這些天誰不使用 jQuery?)
$(function() {
// Get all textareas that have a "maxlength" property.
$("textarea[maxlength]").each(function() {
// Store the jQuery object to be more efficient...
var $textarea = $(this);
// Store the maxlength and value of the field
var maxlength = $textarea.attr("maxlength");
// Add a DIV to display remaining characters to user
$textarea.after($("<div>").addClass("charsRemaining"));
// Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
$textarea.on("keyup blur", function(event) {
// Fix OS-specific line-returns to do an accurate count
var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
$textarea.val(val);
// Display updated count to user
$textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
}).trigger("blur");
});
});
尚未使用國際多字節字符進行測試,因此我不確定它如何與這些字符一起使用。
還要添加以下事件來處理粘貼到 textarea 中:
...
txts[i].onkeyup = function() {
...
}
txts[i].paste = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if (this.value.length + window.clipboardData.getData("Text").length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
...
Internet Explorer 10、Firefox、Chrome 和 Safari 支持 maxlength 屬性。
注意:
<textarea>
標簽的 maxlength 屬性在 Internet Explorer 9 及更早版本或 Opera 中不受支持。
來自HTML maxlength 屬性 w3schools.com
對於 IE8 或更早版本,您必須使用以下內容
//only call this function in IE
function maxLengthLimit($textarea){
var maxlength = parseInt($textarea.attr("maxlength"));
//in IE7,maxlength attribute can't be got,I don't know why...
if($.browser.version=="7.0"){
maxlength = parseInt($textarea.attr("length"));
}
$textarea.bind("keyup blur",function(){
if(this.value.length>maxlength){
this.value=this.value.substr(0,maxlength);
}
});
}
附言
所有主流瀏覽器都支持
<input>
標簽的 maxlength 屬性。
你可以使用 jQuery 讓它變得簡單明了
JSFiddle演示
<textarea id="ta" max="10"></textarea>
<script>
$("#ta").keypress(function(e){
var k = e.which==0 ? e.keyCode : e.which;
//alert(k);
if(k==8 || k==37 || k==39 || k==46) return true;
var text = $(this).val();
var maxlength = $(this).attr("max");
if(text.length >= maxlength) {
return false;
}
return true;
});
</script>
已在Firefox
、 Google Chrome
和Opera
中測試
與修剪 textarea 的值相比,更好的解決方案。
$('textarea[maxlength]').live('keypress', function(e) {
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
if (val.length > maxlength) {
return false;
}
});
我最近在textarea
上實現了maxlength
行為,並遇到了這個問題中描述的問題: Chrome counts characters wrong in textarea with maxlength attribute 。
所以這里列出的所有實現都會有一些小錯誤。 為了解決這個問題,我在.length
之前添加了.replace(/(\r\n|\n|\r)/g, "11")
。 並在剪線時牢記這一點。
我以這樣的方式結束:
var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
el.val(val.slice(0, maxlength - (realLength - length)));
}
不確定它是否完全解決了問題,但它現在對我有用。
試試這個適用於 IE9、FF、Chrome 並為用戶提供倒計時的 jQuery:
$("#comments").bind("keyup keydown", function() {
var max = 500;
var value = $(this).val();
var left = max - value.length;
if(left < 0) {
$(this).val( value.slice(0, left) );
left = 0;
}
$("#charcount").text(left);
});
<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>
嘗試使用此代碼示例:
$("#TextAreaID1").bind('input propertychange', function () {
var maxLength = 4000;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
});
您可以使用屬性maxLength
(注意大寫 L)為“maxlength”設置 HTML 屬性。 如果您嘗試使用maxlength
(全部小寫)並且它不起作用,您可能最終會出現在此頁面上。
textareaElement1.maxLength = 50;
textareaElement2.maxLength = 150;
textareaElement3.maxLength = 250;
如果您想以編程方式對所有現有文本區域執行此操作,則可以迭代getElementsByTagName
結果:
const textAreas = document.getElementsByTagName('textarea');
for (const element of textAreas) {
element.maxLength = 150;
}
上面代碼的小問題是 val() 不會觸發 change() 事件,所以如果您使用backbone.js(或其他模型綁定框架),模型將不會更新。
我發布的解決方案對我很有用。
$(function () {
$(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
var maxLength = $(this).attr('maxlength');
if (e.keyCode > 47 && $(this).val().length >= maxLength) {
$(this).val($(this).val().substring(0, maxLength)).trigger('change');
}
return true;
});
});
這要容易得多:
<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.