入力フォームにテキストを追加

解決済

質問者：kura07
質問日時：2008/10/26 13:40
回答数：3件

JavaScriptについての質問です。

入力フォームで、テキストを入力する点滅する棒（以下、棒と表記）がある位置にテキストを入力したいのです。
例：「abc|de」に「A」を追加
　　「c」と「d」の間に棒があるので、「abcAde」となる

また、入力フォームで、反転されているテキストの両端にテキストを追加つる方法も分かりません。
例：「ab|cd|e」に「A」と「B」を追加
　　「cd」が反転しているので「abAcdBe」となる

ブログ作成なんかでよく見かけると思います。
どなたか分かる方がいたら、ご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： _pipi_
回答日時：2008/10/26 23:10

<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>
ちなみに「棒」と呼ばず、「カーソル位置」として検索！

- 0
- 件

通報する

この回答へのお礼

完璧です！
思ったとおりのスクリプトが作れました。
ありがとうございました。

通報する

お礼日時：2008/10/26 23:58

No.3

回答者： _pipi_
回答日時：2008/10/27 00:29

息抜き。

削除対象かな。
<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);
}
">

- 0
- 件

通報する

この回答へのお礼

_pipi_さん、尊敬します…
私から見たら、大先輩ですね。

通報する

お礼日時：2008/10/27 00:40

No.1

回答者： _pipi_
回答日時：2008/10/26 22:36

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