htmlでinput type="text"の中にリンクを貼り付ける事は可能ですか

Question

htmlでinput type="text"の中にリンクを貼り付けて、貼り付けた物をクリックでそのリンクに飛ばすことをテキスト内で行う事は可能ですか。
どなたかご教授をお願いします。

Answer 1

input[type="text"]について行うのは不可能です。

ただし、それとは別にcontenteditableという属性があって、こちらで作った編集ボックスではHTMLタグも生きるので、うまく作ればアドレスを自動でリンクさせることもできます。

Answer 2

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
    // 要素取得
    $ele = $("#link");
    // click時のイベント設定
    $ele.on("dblclick",function(){
    
    	window.location = $("#link").val();
    })
 });
</script>

<input id="link" type="text"></input>

Comments

[liguofeng29]

上記コードはinput欄に入力し、ダブルクリックすると遷移します。
クリックだと選択時に動くので動作がおかしくなりますね。

ご参考にどうぞ。

[aaaaaaaaaaaaaa]

すいません、出来ればテキストエリア内で＜＞で囲ってあるリンクに飛ぶことの出来るようにする機能を実装したいのですが、参考になるページ等あれば教えていただけますか。

[liguofeng29]

contenteditableを利用して作ってみました。

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){

$ele = $("#input");

// $("#input").blur( function () {
$ele.blur( function () {
// リンク
$ele.html("<div contentEditable=\"false\"><a id=\"link\" href=\"" + $ele.text() + "\">" + $ele.text() + "</a></div>");

});
});
</script>

<div id="input" contenteditable=true>
ここにURLをいれてください。
</div>
----------------------------------------------

URLをいれて確定するとリンクに変更されます。

どうでしょうかね。