Geek Answers Handbook

Link in input text field

HI Everything

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

I want to create a link to the content of the website URL in the text input field, and not any other html tag, is it possible and if so, how.

Regards and thanks Amit

+5
source share
8 answers

This, unfortunately, is not possible in the way you requested it in HTML 4 or below. Even with HTML5, which has several new INPUT TYPES, including a URL, it only validates and has some other useful features, but it won’t give you the need.

jQuery, , , Rich Text - HTML WYSIWYG . .

( ) , HTML4 , HTML4 INPUT . html . :

  • VALUE INPUT, "" DOM ( , , , , , , ( VALUE, " http://yahoo.com" ):

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

    INPUT VALUE = " http://yahoo.com", :

    • javascript:

      document.getElementById("myTxtbox").value

    • jQuery:

      $("myTxtBox").val()

  • /url - , .. / . /, , , . - , ( <label>, ):

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

    textbox/innerText , DOM, :

    • javascript:

      document.getElementById("myTxtbox").innerText

    • jQuery:

      $("myTxtBox").text() - , , ( ).

    : http://yahoo.com

  • /url ANCHOR() HREF URL ( ) , , innerHTML. , , , . . , №2. , # 1, HTML , , :

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

    , # 2, innerHTML , DOM, :

    • javascript:

      document.getElementById("myTxtbox").innerHTML

    • jQuery:

      $("myTxtBox").html()

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

+4

, . , . . .

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

. . , Google.com

SPAN INPUT. .

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

JavaScript JQuery. , , , . .

, $(nameTextField).click(function() {...}), , , , . .

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

:

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

, - , , , / .

, .

+1

, - , ?

, javascript .redirect().

0

, . , ...- . . , PHP, :

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

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

, ?

0

, , . div , , , CSS .

, img Google (http://www.google.ru/)

- .

EDIT: . , . , div.

. , , .

0

. OP , / , .

... , .

: contenteditable=true

HTML

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

-webkit-appearance..depends

JavaScript

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

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

0

More articles:


All Articles