在web开发中,为了提升网页输入框的用户体验,输入提示是很重要的一部分。
以下这种输入提示是我们经常用到的,如图所示:
jquery插件textbox-hinter可以很方便快捷地实现这个功能。
HMTL代码:
<inputtype="text"style="text1"name=""value=""tbhinter="用户名"/>
其中的tbhinter是自定义属性,作为提示内容。
JS代码:
$(".text1").each(function(){
$(this).tbHinter({text:$(this).attr('tbhinter'),'class':'text1-tips'});
});
下面来说明一下用法:
1.$.each遍历所有style=text1的输入框,这样一来,可以把多个需要提示的输入框用一行代码搞定。
2.函数tbHinter的参数说明:
text:提示内容。这里直接取得输入框中设置的tbhinter属性。
'class':控制提示内容的样式类。