- ベストアンサー
入力フォームにテキストを追加
JavaScriptについての質問です。 入力フォームで、テキストを入力する点滅する棒（以下、棒と表記）がある位置にテキストを入力したいのです。 例：「abc|de」に「A」を追加 「c」と「d」の間に棒があるので、「abcAde」となる また、入力フォームで、反転されているテキストの両端にテキストを追加つる方法も分かりません。 例：「ab|cd|e」に「A」と「B」を追加 「cd」が反転しているので「abAcdBe」となる ブログ作成なんかでよく見かけると思います。 どなたか分かる方がいたら、ご教授お願いします。
- kura07
- お礼率87% (54/62)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <hr> Q1.<br> <input type="text" id="a" size="60" value="この文字の中間に棒を！"><br> 追加<input type="text" id="b" size="60" value="さしすせそ"><br> <input type="button" value="まず押してみる" onClick="test()"> <script> function test(){ if(/*@cc_on!@*/false){ document.getElementById('a').focus(); var str =document.getElementById('b').value; var selection = document.selection.createRange(); selection.text = str+selection.text; } else { var str1 = document.getElementById('a').value; var str2 = document.getElementById('b').value; var p = document.getElementById('a').selectionStart; document.getElementById('a').value = str1.substr(0, p) + str2 + str1.substr(p, str1.length); } } </script> </body> </html> ちなみに「棒」と呼ばず、「カーソル位置」として検索！
その他の回答 (2)
息抜き。削除対象かな。 <html> <body> <input type="button" value="Test C.G." onClick=" for(i=0;i<3800;i+=.5){ var p = document.createElement('div'); with(p){ style.position='absolute'; style.top=350-Math.sin(i*3.14519/85)*300+'px'; style.left=350-Math.cos(i*3.14519/90)*300+'px'; appendChild(document.createTextNode('.')); } document.body.appendChild(p); } ">
お礼
_pipi_さん、尊敬します… 私から見たら、大先輩ですね。
<html> <body> <hr> Q2.<br> 前<input type="text" id="a" size="60" value="あいうえお"><br> <input type="text" id="b" size="60" value="かきくけこ"><br> 後<input type="text" id="c" size="60" value="さしすせそ"><br> <input type="button" value="まず押してみる" onClick="test()"> <script> document.getElementById('b').focus(); document.getElementById('b').select(); function test(){ var text=document.getElementById('a').value+getSelectText()+document.getElementById('c').value; if(/*@cc_on!@*/false){ document.selection.createRange().text = text; } else { window.getSelection().getRangeAt(0).insertNode(document.createTextNode(text)); } } function getSelectText(){ return (/*@cc_on!@*/false)?((document.selection.type == 'Text')? document.selection.createRange().text:''):window.getSelection().getRangeAt(0); } </script> </body> </html>
お礼
こちらもばっちりでした。 selection.createRange()みたいなのがあるなんて、初めて知りました。 まだまだ学ぶことはあるようですね＾＾； ありがとうございました。
お礼
完璧です！ 思ったとおりのスクリプトが作れました。 ありがとうございました。