1. ホーム
  2. javascript

[解決済み] Textareaで "shift+enter "を検知して改行するには?

2022-04-24 12:26:07

質問

現状では 入力 テキストエリア内で、フォームが送信されます。

よかった、そうしてほしい。

しかし、彼らがタイプするとき シフト + 入力 で、テキストエリアを次の行に移動させたいのですが。 \n

どうすれば JQuery またはできるだけシンプルなJavaScriptを使用してください。

どのように解決するのですか?

よりシンプルな方法で解決してください。

以下のTimのソリューションがより良いので、そちらを使用することをお勧めします。 https://stackoverflow.com/a/6015906/4031815


私の解決策

次のようなことができると思うのですが・・・。

EDIT : キャレットの位置に関係なく動作するように変更しました。

コードの最初の部分は、キャレットの位置を取得するためのものです。

参照 テキストエリア内のキャレット列(ピクセルではない)の位置を、最初から文字単位で取得するには?

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 
        el.focus();
        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0;
        }
        var re = el.createTextRange(), rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }  
    return 0; 
}

そして、次のような場合にtextareaの値を適宜に置き換えます。 シフト + 入力 を一緒にして、フォームを送信します。 入力 が単独で押された場合。

$('textarea').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;  
        var caret = getCaret(this);          
        if(event.shiftKey){
            this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('form').submit();
        }
    }
});

以下は デモ