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

这个是我老早就在用的方法,本不打算分享,因为网上随便都能搜得到,感觉没有分享的必要。鉴于中国博客联盟有朋友问到了这问题,所以还是简单的整理下,希望能帮到部分不了解placeholder属性的强迫症吧。

一、JS控制默认文字

先说一下问题:

用HotNewspro主题的网站,默认的留言输入框是这样的:

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

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

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

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

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

也就是说,这个预设提示文字它不会自动消失了!

好了,先来看下HotNewspro的这个预设提示文字的js代码,这个js代码位于主题 js 目录下的custom.js文件中:

这就是input默认提示文字的JS实现方法,网上还有另一种类似实现形式:

js逻辑很简单:

a. 鼠标onclick点击时,判断输入框是不是初始的【默认提示文字】,如果是就清空;

b. 鼠标光标离开输入框时,判断输入框里面是否为空,如果为空就自动填入【默认提示文字】。

逻辑当然是没问题的,完全可以使用。

不过在上文插入表情的那种情境下,就出问题了:点击插入表情时,并没有对输入框触发onclick动作,于是默认文字并未清空就填入表情了,然后就算鼠标离开输入框,由于默认文字发生改变,也就不会自动清空了!

当然,针对上文问题情境,完全可以通过给【点击表情这个动作】绑定一个清空预设文字功能,点击表情时先判断输入框是否是【默认提示文字】,如果是就先清空,然后在插入表情,从而解决问题。

但是,我们完全没必要这样做!因为本文的主角正式登场!!!

二、placeholder属性

文本框(INPUT)的placeholder属性是HTML5里新引入的新特征之一,它能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好!

先来看一个demo:

可以发现,输入任意内容后,预设文字将会自动消失!和上文JS同样的效果,却简单得多!!

实现非常简单,就是在input标签中插入一个 placeholder="默认提示文字" 属性即可,比如上方的demo代码如下:

是不是简洁又简单呢?

不过话又说回来,placeholder是HTML5专用的,看网上介绍是不支持IE6~8,我个人手头上就懒得测试低版本IE了,随手测试了IE11下的placeholder,发现比WEBKIT还完美,点击还能自动清空,和之前的JS一摸一样了!

三、解决问题

现在回到文章最开始提出的HotNewspro评论输入框的问题,解决很简单:

①、先编辑HotNewspro主题=>js目录下的custom.js文件,搜索"//Comments",然后用/* */注释这段js代码(即本文最开始的JS代码):

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

②、编辑主题下的comments.php,搜索id="comment",找到评论输入框代码,如下新增placeholder属性:

现在去刷新留言页面,是不是已经有效果啦!(若无效果,留意下js可能会有缓存)

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:16   其中:访客  13   博主  3

  1. 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

    真效率 留言后慢慢学习 感谢

    • 消灭星星 2 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 电信

      交换友链 http://huanglv.me/p 消灭星星

  2. 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 北京市 方正宽带

    我的搜索框是用js控制的. .留言框还没实现类似的功能.

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

      感觉这个更简单好用。

      • 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 北京市 方正宽带

        你以前评论框是 背景图吧. . 我觉得那个挺好看的.

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

          你可以弄一个背景图。

  3. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省芜湖市 电信

    很实用的技巧,多谢博主分享 :mrgreen: 签到成功!签到时间:下午8:08:31,每日签到,生活更精彩哦~

  4. wingsBlog 4 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 珠江宽频

    为什么感觉好复杂

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市宝安区 电信

      :arrow: 你应该是觉得写的很复杂,实际上一句话可以搞定

  5. 名哲 3 来自天朝的朋友 谷歌浏览器 Windows 7 甘肃省酒泉市 电信

    我比较好奇,那个文章的缩略图显示html5的是怎么做到的文章里面没有这张图片吖 :?:

  6. 必分享 2 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

    这个不错,让留言不再单调。

  7. jayroof 2 来自天朝的朋友 谷歌浏览器 Windows XP 江苏省无锡市 铁通

    签到成功!签到时间:下午5:24:36,每日签到,生活更精彩哦~

  8. 梦想网络 5 来自天朝的朋友 火狐浏览器 Windows 8.1 四川省攀枝花市 电信

    好久没来了,,最近在折腾主题。

  9. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省芜湖市 电信

    签到成功!签到时间:下午4:47:31,每日签到,生活更精彩哦~

  10. 开水 0 来自天朝的朋友 谷歌浏览器 Windows 8.1 江西省南昌市 电信

    so easy….哈哈哈,一下就搞定了

  11. 完美 2 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信

    value=”默认提示文字”

    placeholder属性

    3个代码 一起用~~完美

加载中,请稍候...