Question

我有这个jQuery代码：

var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).val().length > char) {
            $(this).val($(this).val().substr(0, char));
        }
        var rest = char - $(this).val().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

工作正常！但是，如果相反，val（）我有text（）它不起作用。

问题是，在可用的char结束时，它开始从一开始就替换文本......使用val是完美的。

为什么我需要文字？因为我正在使用一个所见即所得的插件，它将我的textarea转换为div。

我正在尝试使用.stopPropagation，但它不起作用..尝试返回false而没有...

希望在你的帮助下！

Answer 1

如果您需要使用NicEdit，那么您可以通过将keyup / keydown事件绑定到新创建的div来限制击键（它不会替换您的textarea - 它会添加div并隐藏您的textarea）：

$("#StatusEntry").prev().keydown(function () {

这是有效的，因为新创建的div始终位于textarea之前 - 因此这适用于多个编辑器。

然而，正如您在评论中指出的那样，contentEditable div可能就足够了 - 如果使用以下方法：

    var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).text().length > char) {
            $(this).text($(this).text().substr(1));
        }
        var rest = char - $(this).text().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

演示：http://jsfiddle.net/RjNuX/3

Answer 2

你必须定位好的编辑div。

$(".nicEdit-main").keyup(...

如果您有多个编辑器，此解决方案将无效。

Answer 3

var len = 40;    
$(".nicEdit-main").keydown(function () {
    if($(".nicEdit-main").html().length>len){
        var string = $('.nicEdit-main').html();
        $('.nicEdit-main').html(string.substring(0, len));
        placeCaretAtEnd($('.nicEdit-main').get(0));
    }
});

来自here

的

placeCaretAtEnd函数

限制WYSIWYG编辑器中的字符数（NicEdit）

3 个答案: