讓HTML表單輸入提示可以通過JavaScript訪問嗎？

想象我有一個隱藏的尖端形式：讓HTML表單輸入提示可以通過JavaScript訪問嗎？

<form> 
    <input type='text' id='name' placeholder='Name'> 
    <span id="name_hint" style="display: none;">Please enter your name</span> 
</form>

和jQuery彈出的提示時，輸入值無效：

$('#name').on('blur', function(){ 
    if(!this.value.length) { 
     $('#name_hint').show(); 
    } 
});

當用戶離開文本輸入，而無需輸入任何東西怎麼辦我告訴網絡閱讀器閱讀現在可見提示的提示內容？

來源

2013-01-18 Mohsen

-1

span與tabindex可以得到專注。當輸入值無效時，通過添加tabindex來提示並關注它，我們可以強制網絡閱讀器閱讀彈出提示！

<form> 
    <input type='text' id='name' placeholder='Name'> 
    <span id="name_hint" style="display: none;" tabindex="2">Please enter your name</span> 
</form> 


$('#name').on('blur', function(){ 
    if(!this.value.length) { 
     $('#name_hint').show().get(0).focus(); 
    } 
});

來源

2013-01-19 00:23:05 Mohsen

我認爲這個問題屬於更ux.stackexchange.com，但對於初學者，我可以推薦給：

讓他們脫穎而出：使用鮮豔的色彩。此外，當涉及到成功/警告/錯誤消息時，請堅持使用通常的顏色（請參閱twitter bootstrap如何執行此操作）。
給用戶看看它們的時間：使用轉換效果。雖然可能不是超級花式的東西。用戶總是希望閱讀一些會在他鼻子下面彈出的東西，但他需要注意它。過渡給予用戶看到它們的時間。
說清楚它與用戶操作的內容有關：也許通過一個箭頭指示彈出與焦點上的字段相關。

彷彿你關心的是多爲警告/錯誤/重要的郵件，我建議有一個看起來這thread。

來源

2013-01-18 23:56:58 TKrugg

首先，表單元素要真有<label> s到真正訪問：

<form> 
<input type='text' id='name'> 
    <label for='name'>Please enter your name</label> 
</form>

佔位符屬性，是not a good subsitute for a label。但是，如果你想使用你的方法，它應該是：

<form> 
    <input type='text' id='name' placeholder='Name' aria-labelledby="name_hint"> 
    <span id="name_hint" style="display: none;">Please enter your name</span> 
</form>

然後你的JS也應該有一個onFocus事件。

來源

2013-01-22 18:49:50

讓HTML表單輸入提示可以通過JavaScript訪問嗎？

回答

相關問題