停止响应href链接的html输入答案

【问题标题】：Stop html input responding to href link停止响应href链接的html输入
【发布时间】：2014-01-04 02:12:05
【问题描述】：

我有一个嵌入在充当按钮的边框中的链接，但是我只希望在按钮的外部注册一次单击，而不是当用户在输入（搜索）框内单击时。

<a href='search'>
  <div class='button' id='search_head' style='margin-right: 1em;'>
    <input class='search' placeholder="&nbsp;e.g. blue jeans" type='text'/>
    <img src='img/mag_glass_nav.png' height='20' weight='20' />
    &nbsp; Search
  </div>
</a>

【问题讨论】：

那么你不应该在链接中添加input...
显示你的 CSS 样式定义。

标签： html css input href

【解决方案1】：

只需将您的标记更改为如下内容：

<input class='search' placeholder="&nbsp;e.g. blue jeans" type='text'/>
 <a href='search'>
 <div class='button' id='search_head' style='margin-right: 1em;'><img src='img/mag_glass_nav.png' height='20' weight='20'>&nbsp; Search
 </div>
</a>

【讨论】：

【解决方案2】：

我没听懂！但我认为你不应该那样做！ - 不要在锚标签内包裹输入元素！！ 只需将您的输入元素和搜索链接包装在具有相对位置的 div 中，以便能够定位搜索链接。 JSFiddle example

<div class="search-wrapper">
    <input class='search' placeholder="e.g. blue jeans" type='text' /> 
    <a href="search">
         <img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-24.png"/>
    </a>
</div>

【讨论】：

the <a> element 的 HTML5 规范说“不能有交互式内容后代”
不，您没有做错任何事 :) 我只是指出您的答案正确的原因 - “交互式内容”仅表示您可以与之交互的元素（即输入）跨度>