JavaScriptを使ってテキストフィールドに入力フィールドテキストを挿入

入力フィールドから既にテキストが入っているテキストエリアにテキスト/文字列を挿入する必要があります。挿入された文字列はカーソルの位置になければならず、挿入するためのボタンが必要です。JavaScriptを使ってテキストフィールドに入力フィールドテキストを挿入

JavaScriptでこれを行う方法はありますか？

Thxを事前に

P.S.挿入するテキスト/文字列はいくつかの基本的なグーグルからPHP

出典

2009-05-11 dede

@ Kamiaのコードサンプルが正しいトラックにあります。あなたのテストのための完全な実装がここにあります。あなたの記述に基づいて、私はあなたの実際のコードでは、おそらくテキストエリアに追加するテキストを取得するPHPを使用していくつかのタイプのルックアップがあると仮定しています。このような場合は、サーバーへのAjaxコールが必要になります。そのためにはjQuery's Ajax featuresをお勧めします。

<html> 
<head> 
    <title>Test Page</title> 
    <script type="text/javascript"> 
    window.onload = function(){ 
     btn = document.getElementById("btnInsertText"); 
     myText = document.getElementById("myTextArea"); 
     text = document.getElementById("textToInsert"); 
     btn.onclick = function(){ 
      insertAtCursor(myText, text.value); 
     } 
    } 

    function insertAtCursor(myField, myValue) { 
     //IE support 
     if (document.selection) { 
      myField.focus(); 
      sel = document.selection.createRange(); 
      sel.text = myValue; 
     } 
      //Mozilla/Firefox/Netscape 7+ support 
     else if (myField.selectionStart || myField.selectionStart == '0'){ 
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 
      myField.value = myField.value.substring(0, startPos)+ myValue 
       + myField.value.substring(endPos, myField.value.length); 
      } else { 
       myField.value += myValue; 
      } 
     }  
    </script> 
</head> 
<body> 
    Text To Insert:<input type="text" id="textToInsert" /> 
    <input type="button" id="btnInsertText" value="Insert Text" /><br/> 
    <textarea id="myTextArea" rows="6" cols="50"> 
     Contrary to popular belief, Lorem Ipsum is not simply random text. 
     It has roots in a piece of classical Latin literature from 45 BC, 
     making it over 2000 years old. 
    </textarea> 
</body> 
</html>

出典

2009-05-11 22:31:05 ichiban

答えのためにThx ichiban。 Kamiaと一緒に、あなたは私の質問に完全に答えました。それは魅力的なように働いています。あなたのコードでは、その部分を書き留めておきたいことの一つは、btn.onclick = function（）{insertAtCursor（myTextArea、textToInsert.value）; }を次のように置き換えてください。btn.onclick = function（）{insertAtCursor（myText、text.value）; } Thxもう一度、私の低い評判のためにあなたを代弁することができないために申し訳ありません – dede

Ichiban、私はPHPプログラマーではないので、行く方法は、ajaxコールバックなど含まれていません –

Dede-私はそれをタイプしましたとても速く、私はそれを確認する必要はなかった。私はコードを修正しました。 UpVoteはできませんが、実際にはCheck Markをクリックして回答を受け入れることができます。 – ichiban

デデ、

でデータベースからフェッチされる：D - >

<script type="text/javascript"> 
<!-- 

//myField accepts an object reference, myValue accepts the text strint to add 
function insertAtCursor(myField, myValue) { 
//IE support 
if (document.selection) { 
myField.focus(); 

//in effect we are creating a text range with zero 
//length at the cursor location and replacing it 
//with myValue 
sel = document.selection.createRange(); 
sel.text = myValue; 
} 

//Mozilla/Firefox/Netscape 7+ support 
else if (myField.selectionStart ¦¦ myField.selectionStart == '0') { 

//Here we get the start and end points of the 
//selection. Then we create substrings up to the 
//start of the selection and from the end point 
//of the selection to the end of the field value. 
//Then we concatenate the first substring, myValue, 
//and the second substring to get the new value. 
var startPos = myField.selectionStart; 
var endPos = myField.selectionEnd; 
myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length); 
} else { 
myField.value += myValue; 
} 
} 

//--> 
</script>

テキストを追加するには、ボタンを使用します。

<textarea id="mytext" rows="8" cols="70"></textarea> 
<button onclick="insertAtCursor(document.getElementById('mytext'),'Test text')" valueAdd Test text>

は、それが屋

C屋

を役に立てば幸い

出典

2009-05-11 20:42:40

ありがとうKamia、本当に役立ちます。申し訳ありませんが私の低い評判のためにあなたを代理することはできません。 Thx again – dede

dedu、それのためではなく、助けを助ける助けて、thats stackoverflow;）私はあなたを助けることができる嬉しい。 –

偉大な仕事Kamia +1 – ichiban

JavaScriptを使ってテキストフィールドに入力フィールドテキストを挿入

答えて

関連する問題