使用HTML5的Placeholder属性给输入框增加背景文字提示效果
背景文字提示效果是输入框常用的功能,但大部分是使用JavaScript实现的:
value="请输入影片名称或主演名称..." onBlur="if(this.value=='') this.value='请输入影片名称或主演名称...';" onFocus="if(this.value=='请输入影片名称或主演名称...') this.value='';"
HTML5提供了新的实现方式,只需要在文本框的标记上添加placeholder属性,然后在属性值里输入你需要的提示信息即可。
语法:
<input placeholder=”提示信息...”>
示例:
<form> <input type="text" placeholder="你的姓名..." name="lname"> <input type="password" placeholder="你的密码..." name="pass"> <input type="submit" value="提交"> </form>
用在评论框时,可能需要换行,但Placeholder默认不支持换行,这里以JS实现:
$(function() { var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示'; $('textarea').val(placeholder); $('textarea').css({"line-height":"20px","color":"#A9A9A9"}); $('textarea').focus(function() { if ($(this).val() == placeholder) { $(this).val(''); } }); $('textarea').blur(function() { if ($(this).val() == '') { $(this).val(placeholder); } }); });
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知