将html链接添加到文本输入框中？

Question

I'm trying to add a HTML link to an input box using the following jQuery:

var E = "<a class='tagged_person' contenteditable='false' href='http://www.google.com'>Click This</a>";
$("input[name='newComment']").val(E);

Which is working, but its literally displaying the <a href... , which is what I wanted backend wise, but on the frontend, I'd like the user to see it as rendered as a HTML <a> link. Just like on Facebook/Twitter you can tag users and then there's a link.

Answer 1

I think you're looking for the JQuery method .append . That lets you pass a string of HTML and have it parsed into the DOM. Check it out here

For example:

$('#myDiv').append('<a href="www.google.com">Search for it!</a>');

There's also .appendTo() if it suits your aesthetic better.

Edit : If you're trying to literally stick html as the value of a text input, you can't do that. <input type="text"> carry text, and that's it. You'd have to make your own input form, or use a JQuery plugin. Why would you want to have a link in a form input anyway though? Sure, you could have the user redirected when clicking the form through different event handlers, but input is for inputting . If it redirects, then you didn't really want an input in the first place.

Answer 2

You can use the following code, which when select it will open the link in a new window.

<form action="../">
<select name="myDestination">
    <option value="http://www.website1.com/">Website 1</option>
    <option value="http://www.google.com/">GOOGLE</option>
</select>
<input type="button"
    value="Open in New Window!"
    onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>

Or without the need to press a button:

<form action="../">
  <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.website1.com/">Website 1</option>
    <option value="http://www.google.com/">GOOGLE</option>
  </select>
</form>

Also created a jsfiddle to demonstrate: jsFiddle