Link in input text field

Question

HI All,

I know this is bit strange question, but please suggest.

I want to create a link on website url content in input type"text" field not any other html tag,Is it possible and if yes how.

Regards & Thanks Amit

Answer 1

I don't know whether I understood your question correctly or not. Based on my understanding I gave the answer. Feel free to raise your question. Nothing is impossible.

<a href="http://www.google.com" ><input type='text' style="border:1px solid blue;"></input></a>

It displays a text box. You can enter any data into it. If you press enter key then it forwards the page to Google.com

You can use SPAN instead of INPUT. This also serve the same purpose.

<a href="http://www.google.com" ><span style="border:1px solid blue;" >Link</span></a>

Answer 2

This is unfortunately not possible in the way you've asked it in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.

You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.

These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:

1. The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):

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

   where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:

   • in pure javascript:

     document.getElementById("myTxtbox").value

   • in jQuery:

     $("myTxtBox").val()

2. When your link/url is the text in between the and , i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):

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

   The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:

   • pure javascript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

     $("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).

   The result being: http://yahoo.com

3. When your link/url is the form of an ANCHOR () with an HREF to your url (and visible link text) in between the and , i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:

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

   Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:

   • pure javascript:

     document.getElementById("myTxtbox").innerHTML

   • jQuery:

     $("myTxtBox").html()

   The result being: <a href="http://yahoo.com">http://yahoo.com</a>

Answer 3

You could simply do this :

<a href="index.html"> <input type=text value="link" readonly> </a>

So whenever somebody clicks the textbox, it works as a link, and since it's read only, there wont be any text input/change.

Be careful tho, for it wont look like a regular link and might cause confusion, or may be misinterpreted as a normal textbox.

Answer 4

This is how I did it with JavaScript and JQuery. This wraps the entire text field in a hyperlink, so essentially the entire text field is click-able, which may not be the functionality you are looking for. It worked for my purposes though.

The reason I didn't just use a $(nameTextField).click(function(){...}) structure is because the text field I'm using has the disabled attribute set, so click functions aren't fired. That's why I had to wrap the text field in a hyperlink.

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

Answer 5

Half the people here missunderstood it. The OP would like to have the content/value of the input fields to be hyperlinks instantly and NOT the fields themselves.

It is doable... although it's not an input field but the appearance acts like such one.

Use the following: contenteditable=true

HTML

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

or optionally -webkit-appearance ..depends

JavaScript

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

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

Answer 6

You want someone clicking a textbox to actually be treated as a link click?

Sounds malicious to me but you could bind the focus event via javascript to a window.redirect().

Answer 7

I don't know if I get the question right. As I've understood you want to be able to type in a ...-tag into an input-field. No other tags should be allowed. You can achieve this by using PHP for example:

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

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

Is that what you mean?

Answer 8

Yes, it is possible, but it's not that simple. You need to create div, or other tag you prefer, that will be always floating over your input, using CSS positions, and create anchor inside it.

For example, virtual keyboard img is embedded into input field that way on russian Google page (http://www.google.ru/)

Because of browser-compatibility it's not a simple task.

EDIT: Understood your question a little more. You still need first part of the answer, and you will need to handle keypress event inside your input. When symbol is entered you will need to update your floating div.

So now task is difficult even more. Maybe you should revise your model and not the code.