JavaScript를 사용하여 양식 입력 필드에서 커서 위치의 텍스트 영역에 링크 URL 및 제목 텍스트 삽입

커서 위치의 텍스트 영역에 텍스트 입력 필드의 텍스트를 삽입하는 일부 코드가 stackoverflow에 있습니다.JavaScript를 사용하여 양식 입력 필드에서 커서 위치의 텍스트 영역에 링크 URL 및 제목 텍스트 삽입

사용자가 제목 텍스트가있는 URL을 두 개의 양식 입력 필드에 입력하고 입력에서 완전한 하이퍼 텍스트 링크를 작성한 다음 앵커 태그에 대한 결과 HTML을 텍스트 영역에 삽입 할 수 있도록이 작업 코드를 수정하면됩니다. 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

포맷을하면 좋지 않을까. 코드를 정리하십시오. –

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

와우! 그것은 엄청나게 빨랐다! 신속한 도움에 감사드립니다. –

JavaScript를 사용하여 양식 입력 필드에서 커서 위치의 텍스트 영역에 링크 URL 및 제목 텍스트 삽입

답변

관련 문제