Question

我想将可编辑div中的字符数限制为10.在用户达到限制后，我想使用.preventDefault（）方法来保护div免受其他字符的影响。你能救我吗？的jsfiddle https://jsfiddle.net/7x2dfgx6/1/ HTML

<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>

JQuery的

    jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
        if(char>limit)
        {
            event.preventDefault();
            //TODO
        }
    });
});

Answer 1

回答你的主要问题：
.preventDefault()取消cancelable事件的行为。 input事件不是。

要检查event是否可取消，请尝试：console.log(event.cancelable);。对于input，它会说“false”

你可能想要这样的东西（未经测试）：

const limit = 10;
var rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('input', function(event) {
    var char = $(this).text().length;
    rem = limit - char;
    if(rem <= 0){
        $(this).text($(this).text().slice(0, limit));
    }
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});

修改

JSFiddle demo
由于它是 contentEditable ，我必须使用额外的代码（来自this answer）在输入的末尾设置插入符号。

Answer 2

使用keydown代替input

jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('keypress', function(event) {
        var char = $('#About').text().length;
        if(char>limit)
        {
            return false;
            //or
            event.preventDefault();
            //TODO
        }
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");

    });

});

DEMO

Answer 3

el.addEventListener('input', function(event) {

 if ( this.innerHTML.length >300  && event.keyCode != 8) {

   document.execCommand("undo");  

 }

 });

Answer 4

尝试更改contenEditable属性的值。另外，我将限制检查设置为＆gt; =

jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        event.preventDefault();
        if(char>=limit)
        {
            $('#About').attr('contenteditable','False');
            //TODO
        }
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    });

});

Answer 5

这是限制输入中字符的一种方法。可粘贴和键入。

USE study;

CREATE TABLE timeline(
   timelineID TINYINT NOT NULL AUTO_INCREMENT,
   timelineName VARCHAR(100) NOT NULL,
   timelineNotes    VARCHAR(500) NULL,
   recCreatedByUserID INT(11) NOT NULL,
   recCreatedTimeUTC DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
   recUpdatedByUserID INT(11) NOT NULL,
   recUpdatedTimeUTC TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (timelineID)
 )


CREATE TABLE customer.user(
   userID INT NOT NULL AUTO_INCREMENT,
   firstName VARCHAR(100) NOT NULL,
   lastName VARCHAR(100) NOT NULL,
   emailAddress VARCHAR(100) NOT NULL,
  PRIMARY KEY (userID))

.preventDefault（）无法正常工作。（'input'，function {}）

5 个答案:

DEMO