javascript - contentEditable での改行/段落の区切りを防ぐ

Question

Firefox で contentEditable を使用する場合、ユーザーが Enter キーまたは Shift+Enter キーを押して段落や改行を挿入できないようにする方法はありますか?

Answer 1

contentEditable フィールドの keydown イベントまたは keypress イベントにイベント ハンドラーをアタッチし、キーコードが入力 (または Shift+Enter) として識別された場合にイベントをキャンセルできます。

これにより、フォーカスが contentEditable フィールドにある場合、Enter/Shift+Enter が完全に無効になります。

jQuery を使用している場合は、次のようになります。

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

...これはfalseを返し、入力時にキープレスイベントをキャンセルします。

Answer 2

もう1つのオプションは、ブレークを入力できるようにすることですが、ぼかしの場合はブレークを削除します。これには、貼り付けられたコンテンツを処理できるという利点があります。ユーザーはそれを好きか嫌いかのどちらかです（ユーザーによって異なります）。

function handle_blur(evt){
  var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}

次に、htmlで：

<span onblur="handle_blur(event)" contenteditable>editable text</span>

Answer 3

JQuery フレームワークを使用している場合は、onメソッドを使用して設定できます。これにより、最近追加された要素であっても、すべての要素で目的の動作が得られます。

$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});   

Answer 4

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

Kamensによって提案されたソリューションはOperaでは機能しません。代わりに、イベントをドキュメントに添付する必要があります。

/**
 * Pass false to enable
 */
var disableEnterKey = function(){
    var disabled = false;

    // Keypress event doesn't get fired when assigned to element in Opera
    $(document).keypress(function(e){
        if (disabled) return e.which != 13;
    });                 

    return function(flag){
        disabled = (flag !== undefined) ? flag : true;
    }
}();    

Answer 5

すべての contentEditable フィールドをターゲットにしたい場合は、

$('[contenteditable]').keypress(function(e){ return e.which != 13; });