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

JavaScriptで「textareaにユーザーが入力中に、Enterキーを押したことを感知して直前の(入力が終わった)行を特定の関数に渡して処理し、その結果で直前の行を置き換える」というものを考えているのですが、どうすればよいでしょうか?JavaScript以外の言語でプログラミングの経験はあるのですがJavaScript自体は不慣れです。
textareaにEnterの押下を感知できるようなイベントリスナを追加しておいて、イベント発生時にtextareaの内容を取得して正規表現で最後の改行文字からその手前の改行文字までの間の文字列を取得し、関数に渡して、また正規表現で「前の行」の部分を返り値で置換すればいいのかな、と思っていますが、具体的なメソッド名などがわかりません。
よろしくお願いします。

●質問者: westfish
●カテゴリ:コンピュータ
✍キーワード:JavaScript イベント プログラミング メソッド ユーザー
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Kenju
●30ポイント

以下のようにすればいいでしょう。

function keyCheck(that, code)
{
 if( code != 13 )
 return;

 that.value = that.value.replace(/\n*.*$/, 特定の関数(that.value.match(/\n*.*$/)));
}

<form action="">
<textarea onKeyDown="javascript:keyCheck(this, window.event.keyCode);"></textarea>
</form>

\nを含めて関数に渡されますが、\nまで置換してしまうと意図しない結果になりそうなので、気をつけてください。

Enterキーを押した結果の\nは置換後に入力されます。


http:///

◎質問者からの返答

window.event has no propertyでした。


2 ● Yota
●20ポイント

<html>

<head>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS" />

</head>

<script type="text/javascript"></p> <p> function dispKey(obj,event) {</p> <p> if(event.keyCode == 13) { </p> <p> obj.value = obj.value.replace('こんにちは','おはよう')</p> <p>}</p> <p> }</p> <p> </script>

<body>

<form>

<textarea onkeydown="dispKey(this,event);" cols="20" rows="3"></p> <p></textarea>

</form>

</body>

</script>

</html>

これをやってみてください。「こんにちは」があったら「おはよう」に置き換えるはずです。

参考url

http://jp.selfhtml.org/javascript/objekte/event.htm

ただし、「最後の改行文字からその手前の改行文字までの間の文字列」のくだりがいまいち理解できません。

それとイベントはブラウザによって動かないかもしれませんので、ご注意あれ。

◎質問者からの返答

こちらの方法でキーイベントを受け取り必要な部分を切り出すところまではできました。

<script></p> <p> function keyCheck(textarea, code){</p> <p> if(code == 13){</p> <p> textarea.value.match(/^(?:.*\n)?(.*?)$/);</p> <p> prevLine = RegExp.lastParen;</p> <p> prevLine = "+" + prevLine + "+";</p> <p> alert(prevLine);</p> <p> textarea.value = textarea.value.replace(/^(?:.*\n)?(.*?)$/, prevLine);</p> <p> }</p> <p> }</p> <p> </script>

しかし、同じ正規表現なのに前半で直前の行を取得することはできて、その部分を置換することは1行目以外では失敗します。


3 ● Yota
●10ポイント

具体的なイメージが浮かびませんが、テキスト改行ごとにを分割して配列にして、一番後ろ(から行があるので、ひとつ手前)をつかまえればいいのでは。

var txtAry = new Array() ;

if (obj.value.match(/\n/)) txtAry = obj.value.split('\n') ;

if(txtAry.length > 0) alert(txtAry[txtAry.length-1]) ;

◎質問者からの返答

たしかにそういう方法もありましたね。でも直前の行を取得した後でつまずいているので…。


4 ● Kenju
●30ポイント ベストアンサー

2番目のようにするのでしたら、こうですね。

function keyCheck(textArea, code)
{
 if( code == 13 )
 {
 prevLine = textArea.value.match(/\n*.*$/)[0];
 if(prevLine.substring(0, 1) == "\n")
 prevLine = "\n+" + prevLine.substring(1) + "+";
 else
 prevLine = "+" + prevLine + "+";

 textArea.value = textArea.value.replace(/\n*.*$/, prevLine);
 }
}

window.event、誤っていたようで失礼しました。

◎質問者からの返答

なるほど、いまやっと「なぜ\nに*がついているか」を理解しました。その方法を応用して以下のようにしたらうまく動きました。ありがとうございました。

<script></p> <p> function keyCheck(textarea, code){</p> <p> if(code == 13){</p> <p> prevLine = textarea.value.match(/\n?(.*?)$/)[0];</p> <p> if(prevLine.substring(0, 1) == "\n"){</p> <p> prevLine = "\n+" + prevLine.substring(1) + "+";</p> <p> }else{</p> <p> prevLine = "+" + prevLine + "+";</p> <p> }</p> <p> textarea.value = textarea.value.replace(/\n?(.*?)$/, prevLine);</p> <p> }</p> <p> }</p> <p> </script>

関連質問


●質問をもっと探す●



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