JavaScriptで「textareaにユーザーが入力中に、Enterキーを押したことを感知して直前の(入力が終わった)行を特定の関数に渡して処理し、その結果で直前の行を置き換える」というものを考えているのですが、どうすればよいでしょうか?JavaScript以外の言語でプログラミングの経験はあるのですがJavaScript自体は不慣れです。

textareaにEnterの押下を感知できるようなイベントリスナを追加しておいて、イベント発生時にtextareaの内容を取得して正規表現で最後の改行文字からその手前の改行文字までの間の文字列を取得し、関数に渡して、また正規表現で「前の行」の部分を返り値で置換すればいいのかな、と思っていますが、具体的なメソッド名などがわかりません。
よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2006/06/14 15:05:22
  • 終了:2006/06/15 22:57:06

ベストアンサー

id:Kenju No.4

Kenju回答回数30ベストアンサー獲得回数22006/06/15 10:08:51

ポイント30pt

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、誤っていたようで失礼しました。

id:westfish

なるほど、いまやっと「なぜ\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>

2006/06/15 22:53:32

その他の回答(3件)

id:Kenju No.1

Kenju回答回数30ベストアンサー獲得回数22006/06/14 15:58:54

ポイント30pt

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

		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:///

id:westfish

window.event has no propertyでした。

2006/06/15 00:13:01
id:Yota No.2

Yota回答回数453ベストアンサー獲得回数282006/06/14 21:11:45

ポイント20pt

<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

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

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

id:westfish

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

<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行目以外では失敗します。

2006/06/15 00:31:54
id:Yota No.3

Yota回答回数453ベストアンサー獲得回数282006/06/15 09:24:25

ポイント10pt

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

 var txtAry = new Array() ;

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

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

id:westfish

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

2006/06/15 22:55:33
id:Kenju No.4

Kenju回答回数30ベストアンサー獲得回数22006/06/15 10:08:51ここでベストアンサー

ポイント30pt

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、誤っていたようで失礼しました。

id:westfish

なるほど、いまやっと「なぜ\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>

2006/06/15 22:53:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません