给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. BZOJ3507 [Cqoi2014]通配符匹配

    题意 几乎所有操作系统的命令行界面(CLI)中都支持文件名的通配符匹配以方便用户.最常见的通配符有两个,一个是星号("*"),可以匹配0个及以上的任意字符:另一个是问号(" ...

  2. java 并发runable,callable,future,futureTask

    转载自:http://www.cnblogs.com/dolphin0520/p/3949310.html package future_call; import java.util.concurre ...

  3. 关于android方向传感器的使用

    Android2.2以后 orientation sensors 就被deprecated了 官方建议用acceleration and magnetic sensor 来算 关于这个问题,CSDN上 ...

  4. java.控制次数,每一组数都要计算。所以有个嵌套

    总结:数组内的数据要循环,外面的次数也要循环 package com.aini; import java.util.Scanner; //要求可以控制输入的次数,比如4次.则输入5个数,5组输出结果 ...

  5. Java-Runoob:Java switch case

    ylbtech-Java-Runoob:Java switch case 1.返回顶部 1. Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等 ...

  6. 装饰器1、无参数的装饰器 2、有参数的装饰器 3、装饰器本身带参数的以及如果函数带return结果的情况

     装饰器分成三种: 1.无参数的: 2.有参数的: 3.装饰器本身带参数的. 装饰器decorator又叫语法糖 定义:本质是函数,器就是函数的意思.装饰其他函数.就是为其他函数添加附加功能. 原则: ...

  7. JCE无限制权限策略文件

    JCE无限制权限策略文件,里面是对应jdk6和jdk7的文件 官网下载地址是 JDK6:http://www.oracle.com/technetwork/java/javase/downloads/ ...

  8. 编译openwrt失败 “Please install theopenssl library”

    make menuconfig出现了错误 Build dependency: Please install theopenssl library(with development headers) P ...

  9. pcs与crmsh命令比较

    一.概念 1.crmsh This project is not part of the GNU Project. Pacemaker command line interface for manag ...

  10. Python——string

    字符串操作 string典型的内置方法: count() center() startswith() find() format() lower() upper() strip() replace() ...