禁用点击输入

我想有一个按钮内的文本输入是这样的：禁用点击输入

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

这就是结果：

的问题是，当用户点击在输入文本上，会触发reply_click（）。只要他点击一个元素（设置出价），我就会触发它。

我该怎么办？

见jsfiddle

EDITED 正如你可以看到我想使它看起来类似设计的按钮，你可以在的jsfiddle

来源

2016-08-02 Dejell

为什么地球上你会把一个按钮*放在链接里面？选择一个或另一个...不是两个！如果链接不在某处...... **请勿使用链接**。 –

它匹配设计。我有其他按钮没有输入，它使它看起来很性感 – Dejell

它应该匹配设计**图形**。设计是否需要在链接内嵌入'input'？ –

，你可以这样做：

<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>

来源

2016-08-02 13:47:11

我刚添加style =“color：＃666”，让颜色不是蓝色，但看起来像其他按钮。这很酷。 – Dejell

你说得对。我忘了改变这一点。 –

看到把一个input内的a元素是无效的HTML。从the spec for a：

内容模型：

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

input是互动内容，所以它不能出现在a之内。浏览器可能会选择重写您的HTML，以便在a后面的input尝试使其有效。

所以这里的解决方案是不要把input放在a的内部。不仅因为HTML不允许它（你可以通过div上的点击处理程序来解决这个问题），而是因为它非常不同寻常的用户体验，这对用户来说是陌生的，可能会让用户感到不舒服。

说了这么多，如果浏览器不重新定位input（或者，如果你有一个div与click处理器更换a），您可以通过在挂钩click传播到a停止事件input和使用stopPropgation：

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

我不建议，虽然。

来源

2016-08-02 13:45:13

如何创建上述外观和感觉？ – Dejell

使用div而不是链接 –

@Dejell：基本上，在按钮内部有一个输入是一个**非常不同寻常的用户体验。因此，虽然你可能会做到这一点（例如，oliv37的想法是合理的，一个带'click'处理程序的'div';你也需要上面的'stopPropgation';或者打破整体事物进入顶部，输入端左右两侧，以及底部位，并将它们全部定位），对于您的用户来说，这将是一种奇怪的事情，而这些用户以前不会遇到过这种情况。所以我会退后一步，重新审视用户体验，而不是实现这一点。 –

在理论上把它包起来就可以实现你像这样的东西

$(".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

来源

2016-08-02 13:48:04 stackoverfloweth

这是无效的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，或者处理其他浏览器处理事件的方式。

来源

2016-08-02 13:48:21 Jamiec

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

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

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

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

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

来源

2016-08-02 13:50:49 Randy

你不应该换一个链接里面的input元素。

取而代之的是input needs a label（对于可访问性，尤其是屏幕阅读器用户）以及一些用作按钮的功能（下面代码中的实际button元素）。由于您没有合适的label元素，因此我使用WAI-ARIA described-by将输入字段与按钮链接起来。

<form> 
<input type="text" class="form-control small-input" 
    aria-describedby="ses-budget" /> 
<br /> 
<button type="submit" onclick="reply_click();" 
    class="btn btn-app btn-app-spinner" id="set-budget">Set budget</button> 
</form>

来源

2016-08-02 13:59:20

禁用点击输入

回答

相关问题