$ .trimのキー入力時の内容編集可能なdiv

Question

キー入力時にcontenteditable divをトリミングしようとしていますが、何も動作していないようです。

HTML

<div class="datacollection NoFirstInputSpace" placeholder="____________" contenteditable</div> 

$(document).on('keypress', '.NoFirstInputSpace', function(e) { 

    var str = $(this).text(); 
    $.trim(str); 
    var code = e.keyCode ? e.keyCode : e.which; 
    if (code === 32 && (e.target.selectionStart === 0 || getCaretCharacterOffsetWithin(e.target) === 0)) { 
     e.preventDefault(); 
     return false; 
    } 

}); 

のキー押下は、それがのcon​​tentEditable div要素の最初の文字としてスペースに入るのsuerを防ぎ、正常に動作します。しかし、問題は、エンドユーザーが文字列を入力してハイライトしてからスペースバーを押すと文字列を空白で置き換えることです。

Answer 1

代わりにイベントをバインドする必要があります押されたキーがスペースであることを確認します。

trueの場合、空白をトリムし、.text() =を空に設定します。

また、keyCodeは推奨されていません。 keyを使用してください。

referenceを参照してください。

$(document).on('keyup', '.NoFirstInputSpace', function(e) { 
 
    if (e.key == ' ') { 
 
    var text = $.trim($(this).text()); 
 
    if (text == '') { 
 
     $(this).text(''); 
 
    } 
 
    } 
 
});

.NoFirstInputSpace { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="datacollection NoFirstInputSpace" placeholder="____________" contenteditable></div>