.preventDefault（）不起作用。（'input'，function {}） [英] .preventDefault() not working in on.('input', function{})

问题描述

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

 < div class =profileInfoid =Aboutstyle =border：solid; CONTENTEDITABLE = 真 > OOOOO< / DIV> 
  

JQuery

  jQuery（document）.ready（function（$）{
 
 const limit = 10; 
 rem =限制 -  $（'＃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 
} 
}）; 
}）; 
  

解决方案

要回答您的主要问题：

.preventDefault（）取消 cancelable 。 input 事件不是。

检查事件是可取消的，请试试： console.log（event.cancelable）; 。对于 input 它会说false

---

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

  const limit = 10; 
 var rem = limit  -  $（'＃About'）。text（）。length; 
 $（＃counter）。append（您有< strong> + rem +< / strong> chars left。）; （'＃关于）。on（'input'，function（event）{
 var char = $（this）.text（）。length; 
 rem = limit  -  char ; 
 if（rem <= 0）{
 $（this）.text（$（this）.text（）。slice（0，10））; 
} 
 $（＃counter）。html（您有< strong> + rem +< / strong> chars left。）; 
}）; 
  

---

编辑 p>

JSFiddle演示

因为它是 contentEditable ，我不得不使用额外的代码（来自这个答案）来设置插入符号输入结束。

I would like to limit number of chars in my editable div to 10. After user reach the limit I would like to use .preventDefault() method to protect the div from additional chars. Can You help me out, please? 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
        }
    });
});

解决方案

To answer your main question:
.preventDefault() cancel behavior of the events that are cancelable. input event is not .

To check whether an event is cancelable, try: console.log(event.cancelable);.
For input it will say "false"

---

You may want something like this (untested):

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, 10));
    }
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});

---

EDIT

JSFiddle demo
Since it's contentEditable, I had to use an additional code (from this answer) to set a caret at the end of the input.

这篇关于.preventDefault（）不起作用。（'input'，function {}）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！