让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访问吗？

回答

相关问题