web-dev-qa-db-ja.com

入力テキストフィールドのリンク

こんにちは、みんな、

これは少し奇妙な質問だと思いますが、提案してください。

他のhtmlタグではなく、入力タイプ「テキスト」フィールドにWebサイトのURLコンテンツにリンクを作成したいのですが、可能ですか。

よろしく＆ありがとうアミット

hyperlinktextfield
8
Jos

残念ながら、これはHTML4以下で要求した方法では不可能です。 URLを含むいくつかの新しい入力タイプを持つHTML5でも、検証とその他の便利な機能のみを実行しますが、必要な機能は提供されません。

これを行うのに役立ついくつかのjQueryプラグインを探すかもし​​れません。ほとんどの場合、リッチテキストまたは他のオンライン/ WebベースのHTMLWYSIWYGエディターの背後にある同じプリンシパルを使用します。私はそれらを自分で見つけるのに苦労しました。

実際のHTML4INPUTテキストボックス内のテキストは純粋なテキストであるため、これらの3つの状況（私が今考えることができる）は、HTML4以下でネイティブに直面することとほぼ同じです。 HTMLではないため、クリックできません。ここにいくつかのバリエーションがあります：

  1. INPUTタグのVALUE属性は、対応するDOMオブジェクトの「value」プロパティとしても参照されます（これは基本的にこれまで行ってきたことであり、テキストボックス内に実際にあるテキストが必要であると判断した場合に最も期待できることです。 （この例では " http://yahoo.com "であるため、テキストボックス内のテキストはVALUE属性であるため）：

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

    ここで、INPUTのVALUE = " 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がANCHOR（）の形式であり、URL（および表示されているリンクテキスト）へのHREFがとの間にある場合（テキストボックスの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>_

5
Flak DiNenno

あなたの質問を正しく理解したかどうかはわかりません。私の理解に基づいて、私は答えを出しました。お気軽にご質問ください。不可能はない。

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

テキストボックスが表示されます。あなたはそれにどんなデータでも入力することができます。 Enterキーを押すと、ページがGoogle.comに転送されます。

INPUTの代わりにSPANを使用できます。これも同じ目的を果たします。

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

これが私が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
shadowfox

ここの人々の半分はそれを誤解していました。 OPは、入力フィールドのcontent/valueを、フィールド自体ではなく、即座にハイパーリンクにする必要があります。

入力フィールドではありませんが、外観はそのように機能しますが、実行可能です。

以下を使用してください： 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/

1
Thielicious

あなたは単にこれを行うことができます：

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

したがって、誰かがテキストボックスをクリックするたびに、それはリンクとして機能し、読み取り専用であるため、テキストの入力/変更はありません。

通常のリンクのようには見えず、混乱を招いたり、通常のテキストボックスと誤解されたりする可能性があるため、注意してください。

1
Nitram

テキストボックスをクリックした人を実際にリンククリックとして扱いたいですか？

私には悪意があるように聞こえますが、javascriptを介してfocusイベントをwindow.redirect（）にバインドできます。

0
Matt Mitchell

質問が正しいかどうかわかりません。私が理解したように、入力フィールドに...-タグを入力できるようにしたいと考えています。他のタグは許可されるべきではありません。これは、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
Fidi

はい、可能ですが、それほど単純ではありません。 CSSの位置を使用して、入力の上に常に浮かぶdivまたはその他のタグを作成し、その中にアンカーを作成する必要があります。

たとえば、仮想キーボードimgは、ロシアのGoogleページの入力フィールドにそのように埋め込まれています（ http://www.google.ru/ ）

ブラウザとの互換性があるため、これは簡単な作業ではありません。

編集：あなたの質問をもう少し理解しました。答えの最初の部分はまだ必要であり、入力内でキー押下イベントを処理する必要があります。シンボルが入力されたら、フローティングdivを更新する必要があります。

だから今、仕事はさらに難しい。たぶん、コードではなくモデルを修正する必要があります。

0
Daniel Ganiev