JavaScriptについての質問です。
入力フォームで、テキストを入力する点滅する棒（以下、棒と表記）がある位置にテキストを入力したいのです。
例：「abc|de」に「A」を追加
「c」と「d」の間に棒があるので、「abcAde」となる
また、入力フォームで、反転されているテキストの両端にテキストを追加つる方法も分かりません。
例：「ab|cd|e」に「A」と「B」を追加
「cd」が反転しているので「abAcdBe」となる
ブログ作成なんかでよく見かけると思います。
どなたか分かる方がいたら、ご教授お願いします。
投稿日時 - 2008-10-26 13:40:43
<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>
ちなみに「棒」と呼ばず、「カーソル位置」として検索！
投稿日時 - 2008-10-26 23:10:36
お礼
完璧です！
思ったとおりのスクリプトが作れました。
ありがとうございました。
投稿日時 - 2008-10-26 23:58:03
3人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（2件中 1～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);
}
">
投稿日時 - 2008-10-27 00:29:28
お礼
_pipi_さん、尊敬します…
私から見たら、大先輩ですね。
投稿日時 - 2008-10-27 00:40:30
<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>
投稿日時 - 2008-10-26 22:36:06
お礼
こちらもばっちりでした。
selection.createRange()みたいなのがあるなんて、初めて知りました。
まだまだ学ぶことはあるようですね＾＾；
ありがとうございました。
投稿日時 - 2008-10-27 00:24:35
