文本框placeholder提示(原创)

所属分类:UI-工具提示

 6162  46  查看评论 (5)
分享到微信朋友圈
X
文本框placeholder提示(原创) ie兼容9

更新时间:2021-02-04 22:50:13

提示:被挂载的dom元素,请使用input:text标签或者textarea标签 

使用方法:

1.引入js文件   --jquery插件,首先要引入jquery.js    

2.创建要被挂载的dom元素   --建议在input标签或textarea标签外包裹一层盒子(如使用div标签)

<div class="demo">
    <input type="text" class="default dx_placeholder" placeholder="demo">
</div>

3.使用插件,进行dom元素的挂载

$('.dx_placeholder').dxPlaceholder({
    message: '请输入内容', //展示的文字内容
    color: '#ccc', //字体颜色 
    zIndex: 3, //字体展示的层级 
    left: '200px', //文本提示消息绝对定位下距离左边的值
    top: '10px', //文本提示消息绝对定位下距离上边的值  默认情况下是文本框的高度的一半,在文本位置错乱的情况下需要手动设置 
    fontSize: '14px', //字体大小
})
相关插件-工具提示

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 33483  394

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 29758  375

jQuery网页新功能步骤引导

在网站上经常看到的网页新功能步骤引导
  工具提示
 27544  355

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 32666  312

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    LilyNee 0
    2021/2/25 17:22:49
    建议用父容器包裹起来, 否则很容易错位.
    建议用父容器包裹起来, 否则很容易错位.
        远行客0
        2021/3/4 11:59:43
        感谢宝贵的建议!因为使用了定位的原因,会默认给父容器添加一个相对定位,本身是一个绝对定位,所以如果出现错位,可以通过修改left和top值来修正位置😀
    回复
    夜幕下灬雪狼 0
    2021/2/9 16:57:37
    建议用父容器包裹起来, 否则很容易错位.
        远行客1
        2021/2/20 10:28:50
        感谢宝贵的建议!因为使用了定位的原因,会默认给父容器添加一个相对定位,本身是一个绝对定位,所以如果出现错位,可以通过修改left和top值来修正位置😀
    回复
    远行客 0
    2021/2/5 10:19:15
    此插件可兼容IE8 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复