web-dev-qa-db-ja.com

.preventDefault（）が機能していません。（ 'input'、function {}）

編集可能な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
        }
    });
});
javascriptjqueryhtmldom-eventsevent-propagation
10
Da Artagnan

あなたの主な質問に答えるには：
.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デモ
contentEditableなので、入力の最後にキャレットを設定するために追加のコード（ this answerから）を使用する必要がありました。

18
Artur Filipiak

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

    });

});

[〜＃〜]デモ[〜＃〜]

2
Nageshwar Reddy

入力の文字を制限する1つの方法があります。貼り付けと入力で機能します。

/**
 * 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)
  })
})
0
moto
el.addEventListener('input', function(event) {

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

   document.execCommand("undo");  

 }

 });
0
PN GH

ContenEditable属性の値を変更してみてください。また、制限のチェックを> =に設定しました

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

});
0
grantk