给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. LA2797 Monster Trap

    题意 PDF 分析 可以考虑建图,跑迷宫. 然后以线段端点,原点,和无穷大点建图,有边的条件是两点连线和墙没有交点. 但是对两个线段的交点处理就会有问题,所以把线段延长.另外还需要判断延长后在墙上,舍 ...

  2. Windows 7 中的 God Mode

    Windows 7系统中隐藏了一个秘密的“God Mode”,字面上译为“上帝模式”,但似乎叫它“万能模式”更贴切一些.God Mode其实就是一个简单的文件夹窗口,但包含了几乎所有Windows 7 ...

  3. Pod Installing openssl-ios-bitcode报错

    pod update --no-repo-update 问题:执行上面的操作之后,pod在安装ssl的时候会报错.部分报错信息如下: localhost:OpenSSLTest Later$ pod ...

  4. Web缓存技术

    本章导读 缓存主要是为了提高数据的读取速度.因为服务器和应用客户端之间存在着流量的瓶颈,所以读取大容量数据时,使用缓存来直接为客户端服务,可以减少客户端与服务器端的数据交互,从而大大提高程序的性能. ...

  5. Linux 系统 LVM(Logical Volume Manager)逻辑卷管理

    一.前言 每个Linux使用者在安装Linux时都会遇到这样的困境:在为系统分区时,如何精确评估和分配各个硬盘分区的容量,因为系统管理员不但要考虑到 当前某个分区需要的容量,还要预见该分区以后可能需要 ...

  6. 野村综合社,惠普2面,索尼,CDK面试经理

    今天疯了一口气面试了四个企业,自我介绍都说了七八遍,晚上回家到头就睡.中间接了oracle的电话,也不知道如何. 11:00野村面试 野村综合社北京流通部 面试3个人,一个英语部门负责人,一个日语负责 ...

  7. 前端后端json技术整理

    前端: json对象,例如 var data = { c:, person:[ {name:}, {name:}, {name:}, {name:}, {name:} ] }; 转化为,json串 J ...

  8. linux 查看系统信息和安装哪些软件的命令

    https://www.cnblogs.com/wangkongming/p/4531341.html 查看系统磁盘硬盘占用率 https://blog.csdn.net/aaashen/articl ...

  9. sql server中类似oracle中decode功能的函数

    sqlserver 2008 写法 select t.PROJECTNAME, t.BUILDCONTENTSCALE, CASE t.PROJECTLEVEL ' THEN '国家重点' ' THE ...

  10. elasticsearch pinyin 拼音分词器

    安装pinyin分词 地址:https://github.com/medcl/elasticsearch-analysis-pinyin PUT py_test { "index" ...