[解決済み] 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();
}
}
});
以下は デモ
関連
-
Vueの「データを聴く」原則を解説
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] JavaScriptで要素にクラスが含まれているかどうかを確認する?
-
[解決済み] jQueryで'Enter'でフォームをサブミット?
-
[解決済み】送信ボタンがないのにEnterキーを押してフォームを送信する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
vueディレクティブv-bindの使用と注意点
-
Vueのフィルタの説明
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] テキストエリア内のキャレットの列(ピクセルではない)位置を最初から文字単位で取得するにはどうしたらよいですか?