web-dev-qa-db-ja.com

contentEditableでの行/段落の改行を防ぐ

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

javascriptfirefoxcontenteditable
45
Daniel Cassidy

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

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

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

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

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

64
kamens

これは同じ努力でバニラJSで可能です：

document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});

最も単純なものにはjQueryを使用しないでください。また、「which」の代わりに「key」を使用することもできます： https://developer.mozilla.org/en-US/docs/Web/Events/keypress

_keypressは非推奨であるため、更新：

document.getElementById('idContentEditable').addEventListener('keydown', (event) => {
    if (event.keyCode === 13) {
        evt.preventDefault();
    }
});
23
luschn

次のCSSルールをhide改行に追加します。これは単なるスタイル設定です。preventにいくつかのイベントハンドラーを追加して、改行を挿入する必要があります。

.your_editable br {
    display: none
}
17
frogatto

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

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

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

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>
6
amwinter

ブラウザは改行を追加する以外に、タグとスタイルを追加します（テキストを貼り付けると、ブラウザは貼り付けたテキストスタイルも追加します）。

以下のコードはそれをすべてカバーしています。

  • Enterキーを押すと、改行は追加されません。

  • テキストを貼り付けると、ブラウザによって追加されたすべての要素がテキストから削除されます。

    $('[contenteditable]').on('paste', function(e) {
    //strips elements added to the editable tag when pasting
    var $self = $(this);
    setTimeout(function() {$self.html($self.text());}, 0);
}).on('keypress', function(e) {
     //ignores enter key
     return e.which != 13;
});

ライブ例はこちらをクリック

5
Maor Oz
$("#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;
    }
}();
3
user42507

すべてのcontentEditableフィールドをターゲティングする場合は、

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

私は同じ答えを探してここに来ましたが、試してみた真の Event.preventDefault() を使用して、それがかなり単純な解決策であることに驚いていました

const input = document.getElementById('input');

input.addEventListener('keypress', (e) => {
  if (e.which === 13) e.preventDefault();
});
<div contenteditable="true" id="input">
  You can edit me, just click on me and start typing.
  However, you can't add any line breaks by pressing enter.
</div>
1
AnonymousSB

追加：

display: flex;

Contenteditable html要素について

0
adir kandel