jQuery实现IE输入框完成placeholder标签功能的方法

2024-06-24 11:04:30阅读量：33 字体：大 中 小

本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法。分享给大家供大家参考，具体如下：

如果在输入框加上placeholder="xx"属性，例如：

jQuery实现IE输入框完成placeholder标签功能的方法

则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能，也就是得到如下图所示的对话框：

但是这个属性在WIN7默认的浏览器IE8中无法兼容，更不要说IE6了。也就是说IE里面不支持placeholder这个标签。

不信的话，大可以把这段代码拉到IE8里面运行下试试，你只不过是得到一个空的对话框

思想很简单，一开始这个文本框默认为#cccccc灰色字体，值为“请输入关键词”，当得到焦点之后，把它的颜色设置为#000000黑色，值为空，一旦其失去焦点，如果值为空，马上把其恢复默认的#cccccc灰色字体，值为“请输入关键词”

代码如下：

这里注意的是，是加入一个isthisnull的布尔值来判断其是否为空，是为了判断用户是否要输入“请输入关键词”，

不能认为文本框里面有“请输入关键词”就是空，如果用户自己输入“请输入关键词”呢?

这里也不应该用jquery或者javascript来取color或者style的值是否为"#cccccc"或者“color:#cccccc”来判断，因为通过$(this).css("color")来取color，在不浏览器输出的结果是不一样的，而取style的话，ie会认为这是一个object，而不是字符串

设置一个isthisnull，也可以为后面进一步的表单验证做准备

最终在IE中得到如下效果：

免责声明：

本文《jQuery实现IE输入框完成placeholder标签功能的方法》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 手机锁屏微信语音视频没有提示声音

    手机锁屏微信语音视频没有提示声音

    手机锁屏微信语音视频没有提示声音可能是关闭了，接收语音和视频通话邀请提醒，如果关闭了就不会有提醒，可以通过设置重新开启这个功能，具体操作步骤如下： 手机锁屏微信语音视频没有提示声音 1、打开微信app...

    阅读: 771

  • 荣耀60声音小怎么办

    荣耀60声音小怎么办

    如果荣耀60手机的声音比较小的话，可以去系统内进行相应的调整，把手机的声音调大，具体的操作步骤如下： 荣耀60声音小怎么办 1、打开手机的设置，点击声音和振动”按钮，进入声音和振动的设置页...

    阅读: 852

  • ipad pro怎么录屏

    ipad pro怎么录屏

    ipad pro设备有录屏的功能，有需要的用户可以去手机的控制中心内打开按键进行录屏，具体的操作步骤如下： ipad pro怎么录屏 1、进入手机的桌面中，从手机屏幕的右上角往下滑，呼出控制中心的界面...

    阅读: 901

  • 苹果平板如何隐藏app软件

    苹果平板如何隐藏app软件

    苹果平板没有隐藏app软件的功能，但是可以把app下载到资源库中，这样就不会显示在平板的桌面上，操作方法如下： 苹果平板如何隐藏app软件 1、打开平板的设置，点击主屏幕”按钮，进入主屏幕...

    阅读: 749

  • 荣耀x30如何升级鸿蒙系统

    荣耀x30如何升级鸿蒙系统

    荣耀x30手机升级鸿蒙系统需要去手机的设置内进行手动点击升级，系统会自动进行检测，具体的操作步骤如下： 荣耀x30如何升级鸿蒙系统 1、打开手机的设置，点击系统和更新”按钮，进入系统设置中...

    阅读: 860

  • 手机淘宝首页布局怎么变了

    手机淘宝首页布局怎么变了

    手机淘宝首页布局变了可能是开启了长辈模式，开启长辈模式的布局就会改变，可以通过设置改回原来的布局，具体操作步骤如下： 手机淘宝首页布局怎么变了 1、打开淘宝app，点击我的淘宝，再点击右上角的齿轮进入...

    阅读: 815

热门文章

最近更新