Lien dans le champ de saisie de texte

Ce n'est malheureusement pas possible dans la façon dont vous l'avons demandé dans le HTML 4 ou ci-dessous. Même avec HTML5 qui a plusieurs nouveaux TYPEs d'ENTRÉE, y compris les URL, il ne la validation et a d'autres fonctions utiles, mais ne vous donnera pas ce que vous voulez.

Vous pouvez regarder pour certains plugins jQuery qui peuvent vous aider à faire cela, la plupart utilisent les mêmes principes derrière le Texte Riche ou autres en ligne/web HTML WYSIWYG éditeurs. J'ai eu de la difficulté à trouver moi-même.

Ces 3 situations (que je peux penser en ce moment) sont à peu près ce que vous devrez faire face de manière native avec HTML4 ou au-dessous, sous forme de texte dans une réelle HTML4 zone de texte de SAISIE est du texte pur. Il n'est pas en html et donc PAS cliquable. Voici quelques variantes:

1. La balise d'ENTRÉE de la VALEUR de l'attribut, qui est également mentionné que le DOM de l'objet "valeur de la propriété" (ce qui est essentiellement ce que vous avez fait, et la plupart de ce que vous pouvez espérer, si vous décidez que vous DEVEZ avoir le texte qui est en FAIT à l'intérieur de la zone de texte (parce que le texte à l'intérieur de la zone de texte est la VALEUR de l'attribut, comme je l'ai avec "http://yahoo.com" dans cet exemple):

       <input id="myTxtbox" type="text" value="http://yahoo.com">
   

   où l'ENTRÉE de la VALEUR = "http://yahoo.com", que vous pouvez récupérer avec:

   • en pure javascript:

     document.getElementById("myTxtbox").value

   • en jQuery:

     $("myTxtBox").val()

2. Lorsque votre lien de l'url est le texte entre les et , c'est à dire le texte/innerText de la zone de texte. C'est inutile pour votre question/scénario, car il n'est pas cliquable, et surtout PAS à l'INTÉRIEUR de la zone de texte. Cependant, quelqu'un pourrait vouloir l'utiliser pour récupérer n'importe quel texte que vous utilisez peut-être qu'une étiquette (si vous n'utilisez pas le <label> balise elle-même déjà que c'est):

   <input id="myTxtbox" type="text">
     http://yahoo.com
   </input>
   

   La zone de texte texte/innerText n'est PAS un attribut ici, seulement un objet DOM propriété, mais peuvent encore être récupérées:

   • pur javascript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

     $("myTxtBox").text() - vous l'utiliser pour capure n'importe quel texte que vous utilisez peut-être qu'une étiquette (si vous n'êtes pas à l'aide de la balise).

   Le résultat: http://yahoo.com

3. Lorsque votre lien url est de la forme d'une ANCRE () avec un HREF votre url (et visible texte du lien) entre le et la , c'est à dire le innerHTML de la zone de texte. C'est un peu plus proche de ce que vous voulez, tant que le lien apparaît aussi, et de fonctionner comme un véritable lien. Toutefois, il ne sera PAS à l'intérieur de la zone de texte. Il sera le long de côté comme dans l'exemple n ° 2. Encore une fois, comme indiqué dans l'exemple n ° 1, vous NE pouvez pas avoir de travail effectif HTML, et donc un travail "lien" à l'intérieur d'une zone de texte:

   <input id="myTxtbox" type="text">
     <a href="http://yahoo.com">
       http://yahoo.com
     </a>
   </input>
   

   Une fois de plus, de même pour l'exemple #2, la zone de texte du innerHTML n'est PAS un attribut ici, seulement un objet DOM propriété, mais peuvent encore être récupérées:

   • pur javascript:

     document.getElementById("myTxtbox").innerHTML

   • jQuery:

     $("myTxtBox").html()

   Le résultat: <a href="http://yahoo.com">http://yahoo.com</a>

C'est la façon dont je l'ai fait avec JavaScript et JQuery. Cette enveloppe l'ensemble du champ de texte dans un lien hypertexte, donc, essentiellement, l'ensemble du champ de texte est sur-mesure, ce qui peut ne pas être la fonctionnalité que vous recherchez. Il a travaillé pour mes besoins, mais.

La raison pour laquelle je ne pas utiliser un simple $(nameTextField).cliquez sur(function(){...}) structure est parce que le champ de texte que j'utilise est le désactivé attribut, cliquez sur fonctions ne sont pas licenciés. C'est pourquoi j'ai dû envelopper le champ de texte dans un lien hypertexte.

    //Make person name a hyperlink to page in new tab
    var nameLink = "/exampleUrl/?initStudentId=$" + studentId;
    $("#studentNameLink").replaceWith($("#studentNameLink").html()); //Unwrap any previously wrapped text fields
    $(nameTextField).wrap("<a id='studentNameLink' target='_blank' href='" + nameLink + "'>"); //Wrap text field in anchor
    $(nameTextField).css('color', '#326699'); //Make text blue
    $(nameTextField).val(studentName); //Set text field value

La moitié des gens ici missunderstood il. L'OP voudrais avoir la contenu/valeur des champs de saisie pour être hyperliens instantanément et ne PAS les champs eux-mêmes.

C'est faisable... mais ce n'est pas un champ de saisie, mais l'apparence des actes comme celui-là.

Utiliser les éléments suivants: contenteditable=true

HTML

<div contenteditable=true>
  <a id=lnk style=-moz-appearance:textfield href=http://www.google.com>http://www.google.com</a>
</div>

ou éventuellement -webkit-appearance ..en fonction

JavaScript

var lnk=document.getElementById('lnk');
lnk.addEventListener('click',()=>{
    window.location.href = lnk.getAttribute('href');
});

http://jsfiddle.net/Dezain/jm9mzrzp/

Je ne sais pas si j'obtiens le droit de la question. Comme je l'ai compris, vous voulez être en mesure de taper dans un ...-tag dans une entrée de champ. Pas d'autres balises devraient être autorisés. Vous pouvez atteindre cet objectif en utilisant PHP, par exemple:

<!-- HTML-Code -->
<input type="text" name="link" />

//PHP-Code
$link = strip_tags($_POST['link'], 'a'); //Remove all other tags than the <a>-Tag...

Est cela que vous voulez dire?