给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. LG5055 【模板】可持久化文艺平衡树

    题意 您需要写一种数据结构,来维护一个序列,其中需要提供以下操作(对于各个以往的历史版本): 在第 pp 个数后插入数 xx . 删除第 pp 个数. 翻转区间 [l,r][l,r],例如原序列是 { ...

  2. 使用DeflateStream压缩与解压

    具体可以了解下:http://msdn.microsoft.com/zh-cn/library/system.io.compression.deflatestream(v=vs.110).aspx / ...

  3. [转]Script标签和脚本执行顺序

    Script标签和脚本执行顺序 这里详细聊聊和script标签相关的脚本执行顺序. Script标签的默认行为 几个首要特性: script标签(不带defer或async属性)的会阻止文档渲染.相关 ...

  4. Linux IO 监控与深入分析

    https://jaminzhang.github.io/os/Linux-IO-Monitoring-and-Deep-Analysis/ Linux IO 监控与深入分析 引言 接昨天电话面试,面 ...

  5. mysql安装与基本管理

    一.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...

  6. IDA Pro 权威指南学习笔记(六) - 次要的 IDA 显示窗口

    十六进制窗口 IDA 十六进制窗口可以配置为显示各种格式,并可作为十六进制编辑器使用 默认情况下,十六进制窗口显示程序内容和列表的标准十六进制代码,每行显示 16 个字节,以及其对应的 ASCII 字 ...

  7. Python 列表学习笔录

    列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类 ...

  8. spring mvc学习 总体概览

      spring mvc 设计概览   springmvc处理http请求,主要是在web.xml中配置一个dispatcherservlet,然后由此进行拦截并处理请求返回相应,下面就针对源码大体记 ...

  9. HTML篇

    要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) ...

  10. Java面向对象-类与对象

    Java面向对象-类与对象 类与对象的关系 我们通俗的举个例子,比如人类是一种类,张三这个人就是人类的具体的一个个体,也就是java中的对象:这就是一个类与对象的关系: 类的定义 下面看实例 类的创建 ...