使用JavaScript在表單輸入字段中的光標位置處插入鏈接URL和標題文本

我發現了一些在文本輸入字段中將文本從光標位置插入文本區域的代碼。使用JavaScript在表單輸入字段中的光標位置處插入鏈接URL和標題文本

我想要做的就是修改這個工作代碼，以便用戶可以輸入一個帶有標題文本的URL到兩個表單輸入字段中，從輸入中建立一個完整的超文本鏈接並將生成的HTML標籤插入到textarea作爲光標位置的完整鏈接，就像在單擊wysiwig編輯器中的插入URL按鈕時發生的情況一樣。

我該如何修改下面的代碼來完成此操作？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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 /> 
<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>

來源

2010-07-15 Garr Ovard

格式將是真棒。請清理代碼。 – 2010-07-15 19:20:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Page</title> 

    <script type="text/javascript"> 
    window.onload = function() 
    { 
      btn = document.getElementById("btnInsertText"); 
      myText = document.getElementById("myTextArea"); 
      title = document.getElementById("insTitle"); 
      url = document.getElementById("insUrl"); 
      btn.onclick = function() 
      { 
       insertAtCursor(myText, title.value, url.value); 
      } 
    } 

    function insertAtCursor(myField, title, url) 
    { 
     //IE support 
     if (document.selection) 
     { 
      myField.focus(); 
      sel = document.selection.createRange(); 
      sel.text = '<a href="'+url+'">'+title+'</a>'; 
     } 

     //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)+ '<a href="'+url+'">'+title+'</a>' + myField.value.substring(endPos, myField.value.length); 
     } 

     else 
     { 
      myField.value += myValue; 
     } 
    }  
    </script> 

    </head> 
    <body> 
     title: <input type="text" id="insTitle" /><br /> 
     url: <input type="text" id="insUrl" /> 
     <input type="button" id="btnInsertText" value="Insert Text" /><br /><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> 

However not tested in IE!

來源

2010-07-15 19:39:50 srigi

哇！這太快了！感謝您的快速幫助！ – 2010-07-15 19:54:11

使用JavaScript在表單輸入字段中的光標位置處插入鏈接URL和標題文本

回答

相關問題