Question

我有一个div元素.userbio，用于显示“关于我”。单击元素时，它将变为textarea，我可以在其中编辑信息。但是当角色限制达到180时它应该停止。正在使用插件来编辑“关于我”部分https://code.google.com/p/jquery-in-place-editor/

单击.userbio元素后，插件的.editInPlace类将附加到.userbio元素。所以我尝试设置css .editInPlace textarea { maxlength:180 }，它不起作用。

现在发生的是，我可以输入尽可能多的字符，它会溢出整个页面。我希望编辑停止，当它达到180个字符的限制。甚至尝试了一些Jquery代码片段，但它不起作用。谢谢

Answer 1

如果超过字符数限制，您可以绑定keyup事件并对文本进行子字符串...

＆＃13;

var limit = 180;

$("textarea").on("keyup", function() {
  var val = $("textarea").val();
  if(val.length > limit)
    $("textarea").val(val.substr(0, limit));
});

＆＃13;

textarea {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<textarea>text</textarea>

＆＃13;

Answer 2

我会考虑将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 ....
}

Answer 3

我们必须找到一种方法来添加：

$(".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
});

但它似乎有点棘手，我没有测试它，也许你应该考虑直接询问插件的开发者。

^{oops我没有在发布之前刷新页面，抱歉。这与@pln}

基本相同

Answer 4

在jQuery中，当内部文本的长度超过179个字符时，可以通过禁用输入来实现效果：

if ( $('.userbio').text().length > 179 ) {
    $('.userbio').prop('disabled', true);
}

或者，HTML5支持maxlength元素的textarea属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

设置可编辑div的字符限制

4 个答案: