我有一个 div 元素 .userbio ，用于显示“关于我”。当您单击元素时，它会变成一个文本区域，我可以在其中编辑信息。但它应该停止，当字符限制达到 180 时。正在使用一个插件来编辑“关于我”部分 https://code.google.com/p/jquery-in-place-editor/
单击.userbio 元素时，插件的.editInPlace 类将附加到.userbio 元素。所以我尝试设置 css .editInPlace textarea { maxlength:180 }，它不起作用。
现在发生的情况是，我可以输入尽可能多的字符，但它会溢出整个页面。我希望编辑在达到 180 个字符的限制时停止。甚至尝试了一些 Jquery 代码 sn-ps，但它不起作用。谢谢你
【问题讨论】：
标签： javascript jquery css
我会考虑将maxlength 的代码添加到 jquery 插件中。据我所知，这是在函数 createEditorElement 中控制的，所以只需添加它
createEditorElement: function() {
if (-1 === $.inArray(this.settings.field_type, ['text', 'textarea', 'select']))
throw "Unknown field_type <fnord>, supported are 'text', 'textarea' and 'select'";
var editor = null;
if ("select" === this.settings.field_type)
editor = this.createSelectEditor();
else if ("text" === this.settings.field_type)
editor = $('<input type="text" ' + this.inputNameAndClass()
+ ' size="' + this.settings.text_size + '" maxlength="' + this.settings.text_max + '" />');
else if ("textarea" === this.settings.field_type)
editor = $('<textarea ' + this.inputNameAndClass()
+ ' rows="' + this.settings.textarea_rows + '" '
+ ' cols="' + this.settings.textarea_cols + '" maxlength="' + this.settings.textarea_max + '"/>');
return editor;
}
然后将 text_max 和 textarea_max 的默认值添加到顶部的默认设置对象中
$.fn.editInPlace.defaults = {
text_max: 180,
textarea_max: 180,
.... rest of defaults ....
}
【讨论】：
如果超出字符数限制，您可以绑定 keyup 事件并将文本子串化...
var limit = 180;
$("textarea").on("keyup", function() {
var val = $("textarea").val();
if(val.length > limit)
$("textarea").val(val.substr(0, limit));
});textarea {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<textarea>text</textarea>【讨论】：
class="userbio editInPlace-active"。所以，我稍微调整了你的代码并写了$('.userbio .editInPlace-active')，但它不起作用
$(".userbio").on("keyup", "textarea", function() {
我们必须想办法添加：
$(".editInPlace").attr("maxLength", 180);
某处。
所以我们必须找到一个“钩子”来设置这个属性到 textarea 弹出时。我试图在插件的文档中寻找这种钩子，但没有找到。
如果没有人找到更好的方法来解决您的问题，您可以直接更改库的源代码。
createEditorElement: function() {
if (-1 === $.inArray(this.settings.field_type, ['text', 'textarea', 'select']))
throw "Unknown field_type <fnord>, supported are 'text', 'textarea' and 'select'";
var editor = null;
if ("select" === this.settings.field_type)
editor = this.createSelectEditor();
else if ("text" === this.settings.field_type)
editor = $('<input type="text" ' + this.inputNameAndClass()
+ ' size="' + this.settings.text_size + '" />');
else if ("textarea" === this.settings.field_type)
editor = $('<textarea ' + this.inputNameAndClass()
+ ' rows="' + this.settings.textarea_rows + '" '
+ ' cols="' + this.settings.textarea_cols + '" />');
return editor;
},
在返回“编辑器”之前，添加如下内容：
if(this.settings.textarea_maxLength) {
editor.attr("maxLength", this.settings.textarea_maxLength);
}
然后你必须在实例化editInPlace时将“maxLength”属性设置为选项字段：
$("#editme1").editInPlace({
/* the options you had before */
textarea_maxLength: 180
});
但是好像有点棘手，我没有测试，也许你应该考虑直接问插件的开发者。
哎呀，我在发布之前没有刷新页面，抱歉。这与@pln
的解决方案基本相同【讨论】：
在jQuery中，当内部文本长度超过179个字符时，可以通过禁用输入来达到效果：
if ( $('.userbio').text().length > 179 ) {
$('.userbio').prop('disabled', true);
}
另外，HTML5 支持textarea 元素上的maxlength 属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
【讨论】：