给input添加提示信息,只需添加 “placeholder”的class,将提示信息放在value中,

其中“placeholder”的名字是随便取的,不是H5的“placeholder”属性

例子:
<input class="placeholder" id="" value="我是提示信息"/>

初始化时执行下面方法:
$(".placeholder").each(function () {
            var tip = $(this).val() + '  ';
            //默认值为提示信息
            $(this).val(tip).attr('style', 'color:#6ec1e0;text-align:right;');

$(this).focus(function () {
                if ($(this).val() == tip) {
                    $(this).val("").attr('style', 'color:#808080;text-align:left;');
                }
            }).blur(function () {
                if ($(this).val() == "") {
                    $(this).val(tip).attr('style', 'color:#6ec1e0;text-align:right;')
                }
            });
        });

input 框提示信息的更多相关文章

  1. CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆

    1.渐变字体 主要是看:-webkit-background-clip: text; 该属性 <style> .b1{ width: 500px; height: 200px; font- ...

  2. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  3. 前端获取文件input框的美化操作

    前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容 以上方式获取的按钮是系统默认的显示,有时候我们需要对按钮的外观进行美 ...

  4. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

  5. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javascript onblur事件阻塞选中input框

    先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  7. 如何让input框自动获得焦点

    项目中有个需求  一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name= ...

  8. 类似input框内最右边添加图标,有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. php页面输出时,js设置input框的选中值

    /* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if ( ...

随机推荐

  1. C++输入流和输出流、缓冲区

    一.C++输入流和输出流 输入和输出的概念是相对程序而言的. 键盘输入数据到程序叫标准输入,程序数据输出到显示器叫标准输出,标准输入和标准输出统称为标准I/O,文件的输入和输出叫文件I/O. cout ...

  2. Linux 之 NTP 服务 服务器

    我们选择第三台机器( mysql02 )为 NTF 服务器,其他机器和这台机器进行同步. 1. 检查 ntp 服务是否已经安装[root@mysql02 ~]# sudo rpm -qa | grep ...

  3. bzoj 3202 [Sdoi2013]项链——容斥+置换+推式子

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3202 可见Zinn博客:https://www.cnblogs.com/Zinn/p/100 ...

  4. PhantomJS 一个隐形的浏览器

    下载地址: http://phantomjs.org/download.html 使用方法: 下载压缩包解压出来找到phantomjs.exe 放到python的根目录下

  5. 启用不安全的HTTP方法解决方案

    启用不安全的HTTP方法解决方案 Web AppScan HTTP WebDAV 近期通过APPScan扫描程序,发现了不少安全问题,通过大量查阅和尝试最终还是解决掉了,于是整理了一下方便查阅. 1. ...

  6. js前端处理datetime时间类型

    MySql数据库日期字段定义的是datetime类型,(顺带插入MySql数据库datetime类型可以用这个: str_to_date('2008-4-2 15:23:28','%Y-%m-%d % ...

  7. 1117 Eddington Number

    题意:给出了N个数字,确定一个尽可能大的数字E,要求这N个数字中大于E的数字有E个. 思路: 乍一看不知道题目在说啥.静下心来多读几遍题目,在草稿纸上比划比划,发现是个大水题.解释一下样例,原始序列为 ...

  8. 微信小程序生成太阳码

    微信小程序生成太阳码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=access_token 必须通过POST提交 而且参数 ...

  9. Py修行路 python基础 (十六)面向对象编程的 继承 多态与多态性 封装

    一.继承顺序: 多继承情况下,有两种方式:深度优先和广度优先 1.py3/py2 新式类的继承:在查找属性时遵循:广度优先 继承顺序是多条分支,按照从左往右的顺序,进行一步一步查找,一个分支走完会走另 ...

  10. java成神之——数值操作BigDecimal,BigInteger,Random,SecureRandom

    数值操作 数值新特性 包装类 浮点 BigDecimal BigInteger 数值本地化 随机数 假随机数 真随机数 播种 结语 数值操作 数值新特性 123_456 等价于 123456,增加可读 ...