Insérer l'URL du lien et le texte du titre dans la zone de texte à l'emplacement du curseur à partir des champs de saisie du formulaire utilisant JavaScript

J'ai trouvé du code sur stackoverflow qui insère du texte d'un champ de saisie dans une zone de texte. Ce que je veux faire est de modifier ce code de travail afin que l'utilisateur puisse entrer une URL avec le texte du titre dans deux champs de saisie, construire un lien hypertexte complet de l'entrée et insérer le HTML résultant pour l'étiquette d'ancrage dans la zone de texte comme un lien complet à la position du curseur, tout comme ce qui se passe lorsque vous cliquez sur le bouton Insérer une URL dans un éditeur wysiwig.Insérer l'URL du lien et le texte du titre dans la zone de texte à l'emplacement du curseur à partir des champs de saisie du formulaire utilisant JavaScript

Comment est-ce que je modifierais le code ci-dessous pour accomplir ceci?

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

Source

2010-07-15 Garr Ovard

Mise en forme serait génial. S'il vous plaît nettoyer le code. –

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

Source

2010-07-15 19:39:50 srigi

Wow! C'était incroyablement rapide! Merci pour votre aide rapide! –

Insérer l'URL du lien et le texte du titre dans la zone de texte à l'emplacement du curseur à partir des champs de saisie du formulaire utilisant JavaScript

Répondre

Questions connexes