人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

textareaでctrl + Enterが押下されたときに改行を行う方法をご存じの方ご教授お願いします。
現在、javascriptを利用しtextarea内でEnterを押下された場合は次項目へ、ctrl + Enterが押下された場合は改行を行う処理を実装しています。
Enter押下時の動作はEventオブジェクトのkeyCode属性に9を設定することで実現できのたのですが、
ctrl + Enterの対応はどうしても実現できません。
textareaでctrl + Enterが押下されたときに改行を行う実現方法をご存じの方はご教授お願いします。
※ ブラウザはIE7を利用しています。(とりあえず)

●質問者: Hoxy
●カテゴリ:ウェブ制作
✍キーワード:IE7 JavaScript オブジェクト ブラウザ 対応
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GoldenDawn
●28ポイント

Event.ctrlKey (Ctrl が押下されていれば true) で判別してはどうでしょうか。

◎質問者からの返答

GoldenDawn様ご回答ありがとうございます。

記述してくださったとおり、event.ctrlkeyがtrueのときだと私も理解しています。

質問の内容はそのevent.ctrlkeyがtrueのときにどのように実装したらよいか?っということです。

Enter押下時の処理は以下のように行いました。(※jQueryを利用しています。)

---------------------------------

$('textarea').keydown(function(ev){

if(ev.keyCode == 13){

if(ev.ctrlKey){

return; // ← ? ここにctrl + Enter時の処理が必要!!

}

ev.originalEvent.keyCode = 9;

}

});

---------------------------------

また、ctrl + Enterの処理を実現するために、以下の方法を試しました。

・EventオブジェクトのctrlKey属性にfalseを設定する。

→ EventオブジェクトのctrlKey属性がtrueに設定されていうから、改行の処理が行われないのだろうと考え、

ctrlKey属性にfalseを設定しようとしたのですがctrlKey属性は参照のみのようで、

trueを設定しようとするとエラーが発生し、うまくいきませんでした。

・Eventオブジェクトを新規に作成し、指定のtextareaのkeydownイベントをもう一度発生させる。

→ IEの場合、document.createEventObject()メソッドにてEventオブジェクトを生成できるので、

新規に作成したEventオブジェクトのkeyCode属性に13(Enterキーのコード)を設定し、

fire()メソッドにて着火してみました。

イベント自体は発生したのですが、改行は行われませんでした。

(イベントが発生してもブラウザには関係ないので、改行されないのは当り前といえば当たり前です・・・。)

上記のことを踏まえた上で、ご回答いただければと思います。


2 ● GoldenDawn
●42ポイント
if (ev.ctrlKey) {
 var selection = document.selection.createRange() ;
 selection.text = "\n" + selection.text ;
 return ;
}

とりあえず…… IE6 で動作テスト。Firefox では動作しません。

◎質問者からの返答

早速のご回答ありがとうございます。

Rangeオブジェクトは知りませんでした。

上記の方法でこちらが思っていたことを実現することができました。

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ