让IE实现HTML5元素的placeholder属性

無題

HTML5的input text和textarea元素中都可以用placeholder提示用户需要输入的内容。
当光标不在文本框内且文本框没有输入内容时,一直显示文字提示。
当用户的光标移入(focus)时或光标移入并输入内容后,文字提示消失。

IE并不支持这一属性,
可以通过jQuery插件的方法实现这一效果

这是一个日本人开发的jQuery插件
https://github.com/ahomu/jquery.ah-placeholder

解决步骤

1.先下载插件js文件,并在HTML中引入。

<script src="./js/jquery.ah-placeholder.js" charset="utf-8"></script>

2.找到需要设置效果的元素,如文本框email

<input type="text" name="email" placeholder="请输入Email" id="emailinput" />

3.对这个元素添加插件的效果

$(function()
{
    $('#emailinput').ahPlaceholder({
        placeholderColor : 'silver', // 提示文字的颜色
        placeholderAttr  : 'placeholder', //placeholder的属性名字
        likeApple        : false //光标进入元素(focus)后的行为
    });
});

三个属性的说明

  • placeholderColor:提示文字的颜色
  • placeholderAttr:placeholder的属性名。下面的情况为hintstring:
    <input type="text" name="email" hintstring="请输入Email" id="emailinput" />
    
  • likeApple
    • true:光标一进入文本框,提示文字就消失
    • false:光标进入文本框并输入内容后,提示文字消失

效果图

無題

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>