Ссылка в поле ввода текста

Question

HI All,

Я знаю, что это немного странный вопрос, но, пожалуйста, предложите.

Я хочу создать ссылку на URL-адрес веб-сайта в поле ввода типа "текст", а не на любые другие.HTML-тег, это возможно, и если да, то как.

С уважением, Амит

Answer 1

К сожалению, это невозможно, как вы просили в HTML 4 или ниже. Даже с HTML5, который имеет несколько новых типов ВХОДА, включая URL, он только выполняет проверку и имеет некоторые другие полезные функции, но не дает желаемого результата.

Вы можете найти некоторые плагины jQuery, которые могут помочь вам в этом, большинство из них используют те же принципы, что и Rich Text, или другие онлайн / веб-редакторы HTML WYSIWYG. У меня были проблемы с их поиском.

Эти 3 ситуации (о которых я могу думать прямо сейчас) в значительной степени являются тем, с чем вы столкнетесь изначально с HTML4 или ниже, так как текст в текстовом поле HTML4 INPUT является чистым текстом. Это не HTML и, следовательно, НЕ кликабельны. Вот несколько вариантов:

1. Атрибут VALUE тега INPUT, на который также ссылаются как на свойство «value» соответствующего объекта DOM (это то, на что вы в основном работали и на что вы можете надеяться, если решите, что ДОЛЖНЫ иметь текст, который на самом деле находится внутри текстового поля (потому что текст внутри текстового поля является атрибутом VALUE, как у меня это с "http://yahoo.com" в этом примере):

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

   , где ЗНАЧЕНИЕ ВХОДА = "http://yahoo.com",, которое вы можете получить с помощью:

   • в чистом JavaScript:

     document.getElementById("myTxtbox").value

   • в jQuery:

     $("myTxtBox").val()

2. Когда ваша ссылка / URL является текстом между и, то есть text / innerText текстового поля. Это бесполезно для вашего вопроса / сценария, так как он не кликабелен, и что более важно НЕ ВНУТРИ текстового поля. Однако кто-то может захотеть использовать это для получения любого текста, который вы можете использовать в качестве метки (если вы уже не используете сам тег <label>, который есть):

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

   Здесь text / innerText текстового поля НЕ является атрибутом, это только свойство объекта DOM, но его можно получить:

   • чистый JavaScript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

     $("myTxtBox").text() - вы можете использовать это для записи любого текста, который вы можете использовать в качестве метки (если вы не используете тег).

   Результат: http://yahoo.com

3. Когда ваша ссылка / URL является формой ЯКОРА () с 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>

Answer 2

Я не знаю, правильно ли я понял ваш вопрос или нет.Основываясь на моем понимании, я дал ответ.Не стесняйтесь поднять свой вопрос.Нет ничего невозможного.

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

Answer 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

Answer 4

Половина людей здесь не поняли это. ОП хотел бы, чтобы содержимое / значение полей ввода было гиперссылками мгновенно, а НЕ самими полями.

Это выполнимо ... хотя это и не поле ввода, а внешний вид действует так же.

Используйте следующее: 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 .. зависит

JavaScript

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

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

Answer 5

Вы можете просто сделать это:

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

Поэтому, когда кто-нибудь нажимает на текстовое поле, оно работает как ссылка, и, поскольку оно доступно только для чтения, никакого ввода текста не будет /изменить.

Будьте осторожны, поскольку это не будет выглядеть как обычная ссылка и может привести к путанице, или может быть неверно истолковано как обычное текстовое поле.

Answer 6

Да, это возможно, но это не так просто. Вам нужно создать div или другой тег, который вы предпочитаете, который всегда будет перемещаться по вашему вводу, используя позиции CSS, и создавать привязку внутри него.

Например, виртуальная клавиатура img встроена в поле ввода на русской странице Google (http://www.google.ru/)

Из-за совместимости с браузером это не простая задача.

РЕДАКТИРОВАТЬ: Понял ваш вопрос немного больше. Вам все еще нужна первая часть ответа, и вам нужно обработать событие нажатия клавиши внутри вашего ввода. Когда символ введен, вам нужно обновить плавающий div.

Так что теперь задача еще сложнее. Возможно, вам следует пересмотреть свою модель, а не код.

Answer 7

Я не знаю, правильно ли я понял вопрос.Как я понял, вы хотите иметь возможность вводить тег ...- в поле ввода.Другие теги не должны быть разрешены.Вы можете добиться этого, используя PHP, например:

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

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

Это то, что вы имеете в виду?

Answer 8

Вы хотите, чтобы кто-то, щелкающий по текстовому полю, фактически воспринимался как щелчок по ссылке?

Звучит злонамеренно для меня, но вы можете связать событие focus с помощью javascript для window.redirect ().