禁用點擊輸入

我想有一個按鈕內的文本輸入是這樣的：禁用點擊輸入

<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

禁用點擊輸入

回答

相關問題