0

アンカー タグで囲まれた領域があり、ユーザーがその領域をクリックすると、アンカー タグ href に移動する必要があります。また、その領域には、ユーザーがテキストを入力して送信できるテキストボックスとボタンコントロールが含まれている必要があります。問題は、テキストボックスまたはボタンをクリックすると、アンカータグで指定されたページにリダイレクトされることです。

    <a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
    <div style="">Title</div>
     <div>
    <input type="text" name="name">
    <button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>

このjsfiddleを参照してください。ここで簡単な問題を作成しました。ただし、負の margin-top 値を指定することで、これに対する解決策を見つけました。それは機能していますが、より良い解決策に興味があります。ボタンとテキストボックスがコンテンツ div 内にないため、このソリューションはスケーラブルではないためです。

これらの各セクションは、検索結果のアイテムを表します。ユーザーが検索項目をクリックすると、単一の項目ページに移動します。同時に、ユーザーは編集オプションを選択して、検索結果ビューからコンテンツを編集できる必要があります。編集を選択すると、送信するテキストボックスとボタンが表示されます。

4

3 に答える 3

3

残念ながら、HTML5仕様は次のことについて述べています<a> element：

コンテンツ モデル:

透過的ですが、インタラクティブなコンテンツの子孫があってはなりません。

つまり、<a>要素には、その親が含めることを許可されているすべての要素を含めることができますが、次のようなものは除き<button>ます。

<button>あなたは、あなたの<input>仕事を外で働かせる方法を見つける必要があります。<a>

于 2013-10-10T09:44:16.910 に答える
0

これを使って

<input type="text" name="name" onclick="return false;" />

これは、マークアップを変更したくない場合にのみ使用してください。

最善の解決策は、HTML のセマンティクスに合わせてスタイルを設定することです。ガレスが指摘したように、この方法は正しくありません。

あなたのボタンの場合

<button type="button" onclick="buttonClick(event);">Click Me!</button>

function buttonClick(e) {
            alert('button clicked');
            e.preventDefault();
        }
于 2013-10-10T09:55:10.577 に答える