Javascript .preventDefault（）未在上工作。'；输入'；，函数{}

我想将可编辑div中的字符数限制为10。在用户达到限制后，我想使用

.preventDefault（）

方法来保护div不受其他字符的影响。你能帮帮我吗

JSFIDLE

HTML

ooo

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
        }
    });
});

jQuery（文档）.ready（函数（$）{
常数限值=10；
rem=限制-$（'#About'）.text（）.length；
$（“#计数器”）.append（“您还有“+rem+”字符剩余”）；
$（“#关于”）。关于（'input'，函数（event）{
var char=$（'#About'）.text（）.length；
rem=极限-字符；
$（“#counter”）.html（“您还有“+rem+”字符剩余”）；
如果（字符>限制）
{
event.preventDefault（）；
//待办事项
}
});
});

尝试更改contendeditable属性的值。我还将限制的检查设置为>=

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

});

jQuery（文档）.ready（函数（$）{
常数限值=10；
rem=限制-$（'#About'）.text（）.length；
$（“#计数器”）.append（“您还有“+rem+”字符剩余”）；
$（“#关于”）。关于（'input'，函数（event）{
var char=$（'#About'）.text（）.length；
rem=极限-字符；
event.preventDefault（）；
如果（字符>=限制）
{
$（'#About'）.attr（'contenteditable'，'False'）；
//待办事项
}
$（“#counter”）.html（“您还有“+rem+”字符剩余”）；
});
});

使用

按键

代替

输入

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

    });

});

jQuery（文档）.ready（函数（$）{
常数限值=10；
rem=限制-$（'#About'）.text（）.length；
$（“#计数器”）.append（“您还有“+rem+”字符剩余”）；
$（“#About”）.on（'keypress'，函数（事件）{
var char=$（'#About'）.text（）.length；
如果（字符>限制）
{
返回false；
//或
event.preventDefault（）；
//待办事项
}
rem=极限-字符；
$（“#counter”）.html（“您还有“+rem+”字符剩余”）；
});
});

---

回答您的主要问题：

.preventDefault（）

取消已删除事件的行为<代码>输入事件不可用

要检查

事件是否可取消，请尝试：
console.log（event.cancelable）

对于
输入
它将显示“false”


您可能需要这样的内容（未经测试）：

const limit=10；
var rem=limit-$（'#About'）.text（）.length；
$（“#计数器”）.append（“您还有“+rem+”字符剩余”）；
$（“#关于”）。关于（'input'，函数（event）{
var char=$（this）.text（）.length；
rem=极限-字符；
if（rem这里有一种限制输入中字符的方法。用于粘贴和键入

/**
 * Limit an inputs number of characters
 * @param {event} e - event of the input the user is typing into
 * @param {number} limit - number of characters to limit to 
 */
function limitInputCharacters(e, limit){
  if(!e){
    return;
  }
  var inputText = e.target.value;
  var charsLeft = limit - inputText.length;
  if (charsLeft >= 0) {
    // do something, or nothing
  } else if (charsLeft < 0) {
    e.target.value = inputText.slice(0, limit)
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const aboutTextArea = document.getElementById('input-about');
  aboutTextArea.addEventListener("input", function(e) {
    limitInputCharacters(e, 300)
  })
})

/**
*限制输入的字符数
*@param{event}e-用户正在键入的输入的事件
*@param{number}limit-要限制的字符数
*/
函数限制输入字符（e，限制）{
如果（！e）{
返回；
}
var inputText=e.target.value；
var charsLeft=限制-输入文本长度；
如果（charsLeft>=0）{
//做点什么，或者什么都不做
}否则如果（charsLeft<0）{
e、 target.value=inputText.slice（0，限制）
}
}
document.addEventListener（“DOMContentLoaded”，function（））{
const aboutTextArea=document.getElementById（'input-about'）；
关于ExtArea.addEventListener（“输入”，函数（e）{
limitInputCharacters（e，300）
})
})
通过尝试阻止默认设置，您只会停止触发输入事件，而不会实际阻止用户输入更多数据。在用户达到限制后，我希望允许他们使用backspace。您可以看到，例如，用户希望写下长单词，但他错误地计算了单词长度，他应该能够o使用backspace擦除整个单词，然后写下另一个。1.我更喜欢使用event.preventDefault（）；返回false，因为如果我们返回false，我们就无法通过backspace擦除输入单词。2.ATM“keypress”函数似乎是解决我的问题的最佳方法，但你能告诉我为什么使用event.preventDefault（）吗没有使用“输入”？提供的演示Nageshwar似乎正在执行您的请求。感谢各位朋友抽出时间。您好，您知道如何在尝试以iframe>body元素为目标时将插入符号设置为结尾（使用此代码）？body元素具有
editablecontent=“true”
和
PlaceCareTate（此）；
对我不起作用。另请参见：。非常感谢！请您解释代码以及如何尽可能简洁地应用代码？300-最大长度；event.keyCode！=8-删除；document.execCommand（“undo”）；-取消上次操作（“输入”）document.execCommand标记为不推荐，请参见MDN documentation（）-这不是生产现场的可靠解决方案。
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.");
});

/**
 * Limit an inputs number of characters
 * @param {event} e - event of the input the user is typing into
 * @param {number} limit - number of characters to limit to 
 */
function limitInputCharacters(e, limit){
  if(!e){
    return;
  }
  var inputText = e.target.value;
  var charsLeft = limit - inputText.length;
  if (charsLeft >= 0) {
    // do something, or nothing
  } else if (charsLeft < 0) {
    e.target.value = inputText.slice(0, limit)
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const aboutTextArea = document.getElementById('input-about');
  aboutTextArea.addEventListener("input", function(e) {
    limitInputCharacters(e, 300)
  })
})

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

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

   document.execCommand("undo");  

 }

 });