利用placeholder属性来添加输入框默认文字提示,提高用户体验

建站笔记1年前 (2023)发布 小萝卜头
1,170 0 0

这个是我老早就在用的方法,本不打算分享,因为网上随便都能搜得到,感觉没有分享的必要。鉴于中国博客联盟有朋友问到了这问题,所以还是简单的整理下,希望能帮到部分不了解 placeholder 属性的强迫症吧。
一、JS 控制默认文字
先说一下问题:
用 HotNewspro 主题的网站,默认的留言输入框是这样的:

常规情况下,光标聚焦留言输入框,这个预设提示文字是会自动消失的:

但是,如果你在没输入文字之前,点击插入表情,就成这样了:

也就是说,这个预设提示文字它不会自动消失了!
好了,先来看下 HotNewspro 的这个预设提示文字的 js 代码,这个 js 代码位于主题 js 目录下的 custom.js 文件中:

//Comments
$(document).ready(function(){
// 当鼠标聚焦
if($('#comment').val()==""){
$('#comment').val('留言是种美德,写点什么...').css({color:"#666"});}
$('#comment').focus(
function() {
if($(this).val() == '留言是种美德,写点什么...') {
$(this).val('').css({color:"#222"});
}
}
// 当鼠标失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('留言是种美德,写点什么...').css({color:"#666"});
}
}
);
});

这就是 input 默认提示文字的 JS 实现方法,网上还有另一种类似实现形式:
<input type=”text” value=”默认提示文字” onclick=”if(this.value==’默认提示文字’){this.value=””;}” onblur=”if(this.value==”){this.value=”默认提示文字”;}” />
js 逻辑很简单:
a. 鼠标 onclick 点击时,判断输入框是不是初始的【默认提示文字】,如果是就清空;
b. 鼠标光标离开输入框时,判断输入框里面是否为空,如果为空就自动填入【默认提示文字】。
逻辑当然是没问题的,完全可以使用。
不过在上文插入表情的那种情境下,就出问题了:点击插入表情时,并没有对输入框触发 onclick 动作,于是默认文字并未清空就填入表情了,然后就算鼠标离开输入框,由于默认文字发生改变,也就不会自动清空了!
当然,针对上文问题情境,完全可以通过给【点击表情这个动作】绑定一个清空预设文字功能,点击表情时先判断输入框是否是【默认提示文字】,如果是就先清空,然后在插入表情,从而解决问题。
但是,我们完全没必要这样做!因为本文的主角正式登场!!!
二、placeholder 属性
文本框(INPUT)的 placeholder 属性是 HTML5 里新引入的新特征之一,它能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用 JavaScript 里实现的,而现在,HTML5 提供了原生支持,而且效果更好!
先来看一个 demo:

可以发现,输入任意内容后,预设文字将会自动消失!和上文 JS 同样的效果,却简单得多!!
实现非常简单,就是在 input 标签中插入一个 placeholder=”默认提示文字” 属性即可,比如上方的 demo 代码如下:
<input name=”test” type=”text” placeholder=”请输入文字试试…” />
是不是简洁又简单呢?
不过话又说回来,placeholder 是 HTML5 专用的,看网上介绍是不支持 IE6~8,我个人手头上就懒得测试低版本 IE 了,随手测试了 IE11 下的 placeholder,发现比 WEBKIT 还完美,点击还能自动清空,和之前的 JS 一摸一样了!
三、解决问题
现在回到文章最开始提出的 HotNewspro 评论输入框的问题,解决很简单:
①、先编辑 HotNewspro 主题=>js 目录下的 custom.js 文件,搜索”//Comments”,然后用/* */注释这段 js 代码(即本文最开始的 JS 代码):

②、编辑主题下的 comments.php,搜索 id=”comment”,找到评论输入框代码,如下新增 placeholder 属性:
<textarea placeholder=”留言是一种美德,你可以写点什么…” name=”comment” id=”comment” tabindex=”4″></textarea>
现在去刷新留言页面,是不是已经有效果啦!(若无效果,留意下 js 可能会有缓存)

好了,本文就介绍到这里了!非常简单的玩意,在中国博客联盟张戈博客的搜索框,早就应用了 placeholder 预设文字属性,细心观察的朋友,右键看一下源代码都可以了然于心了!

收录于{张戈博客} 原文链接原文链接

© 版权声明

相关文章

暂无评论

暂无评论...