使用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和标题文本

回答

相关问题