在<a> element

Question

I would like to have an input text inside a button like this:

<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" disabled  class="form-control small-input">
Set Budget
</a>

this is the result:

中停用点击输入

问题是当用户点击输入文本时，会触发reply_click（）。我只会在点击a元素（设置出价）时触发它。

我该怎么做？

请参阅jsfiddle

EDITED 如你所见，我想让它看起来与设计中的按钮类似，你可以在JSfiddle中看到

Answer 1

将input 放在 a元素中是无效的HTML。来自the spec for a：

  

内容模型：

     

Transparent，但必须没有interactive content后代。

input是互动内容，因此无法在a内展示。浏览器可能会选择重写HTML以将input 放在 a之后，以使其有效。

所以这里的解决方案不是将input放在a内。不仅因为HTML不允许它（你可以使用div上的点击处理程序解决这个问题），而且因为它是非常不寻常的用户体验，对于用户来说这将是不熟悉的并且可能会让人感到不舒服。

话虽如此，如果浏览器没有重新定位input（或者如果您将a替换为div和click处理程序），则可以停止通过在a上挂钩click并使用input传播到stopPropgation的事件：

$("a input").on("click", function(e) {
    e.stopPropagation();
}):

我不是推荐它。

Answer 2

从理论上讲，你可以用这样的东西来实现你正在寻找的效果

$(".setBid").click(function(e){
    var $input = $(this).find("input[type='text']");

    if ($input.is(e.target)
    {
        //do action
    }
})

这是html

<a class="btn btn-app btn-app-spinner setBid">
    <input type="text" disabled  class="form-control small-input">
    Set Budget
</a>

然而，正如@TJ所说这是无效的HTML

Answer 3

这是无效的HTML！不要那样做！

如果必须，那么只需通过处理输入上的点击停止传播：

function reply_click(e){
   alert("clicked!");
}

function input_click(e)
{
  e.stopPropagation();
  return false;
}

<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
  <input type="text" class="form-control small-input" onclick="input_click(event)">
  Set Budget
</a>

此代码段不是跨浏览器安全的（在Chrome中测试）。使用jQuery，或处理其他浏览器处理事件的方式。

Answer 4

你可以这样做：

<div class="btn btn-app btn-app-spinner">
      <input type="text" class="form-control small-input">
      <a onclick="reply_click();" >
          Set Budget
      </a>
</div>

在你的小提琴中用你在答案中提供的html替换你的html，你将得到你想要的。

诀窍是将您在a中的相同类添加到另一个元素中，它们看起来就像是相似的。

然后，如果您希望在用户点击“设置预算”时触发您的操作，请使用<a>

将其打包

Answer 5

您不应将FROM tblBookings b INNER JOIN tblPayments p ON p.ID = ( SELECT TOP 1 ID FROM tblPayments WHERE BookingID = b.BookingID AND DeleteMark != 1 AND PaymentStatusID IN (1,2) ORDER BY DateOfCreation) 元素包装在链接中。

相反，input needs a label（用于辅助功能，尤其是屏幕阅读器用户）和用作按钮的东西（下面代码中的真实input元素）。由于您没有合适的button元素，因此我使用WAI-ARIA described-by将输入字段与按钮相关联。

label

Answer 6

您可以创建div并在该div上使用click。这样你就拥有了有效的HTML。

＆＃13;

＆＃13;

function bid(){
   alert('bid');
}

function stop(e){
   e.stopPropagation();
}

＆＃13;

div {
  width:200px;
  height:60px;
  background-color:#f93;
  text-align:center;
  padding-top:20px;
}

＆＃13;

<div onclick="bid()">
  <input type='text' onclick="stop(event)">
  <p>bid</p>
</div>

＆＃13;

＆＃13;

＆＃13;