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

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

一、JS 控制默认文字

先说一下问题:

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

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

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

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

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

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

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

好了,先来看下 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 代码):

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

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

<textarea placeholder="留言是一种美德,你可以写点什么..." name="comment" id="comment" tabindex="4"></textarea>

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

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

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇