给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. 洛谷 P3225 [HNOI2012]矿场搭建

    传送门 题目大意:建设几个出口,使得图上无论哪个点被破坏,都可以与出口联通. 题解:tarjian求割点 首先出口不能建在割点上,找出割点,图就被分成了几个联通块. 每个联通块,建出口.如果割点数为0 ...

  2. LINUX 11G RAC ASM磁盘组在线增加磁盘扩容

    LINUX 11G RAC ASM磁盘组在线增加磁盘扩容 1.操作系统版本 OEL 6.1 [root@cqltjcpt1 ~]# more /etc/redhat-release Red Hat E ...

  3. mysql存入GBK编码字段信息

    set @moneyStr=BASE64_ENCODE(CONVERT(CONCAT('线上报名且已交费',money,'元') using GBK));

  4. 基于ThinkPHP的开发笔记3-登录功能(转)

    1.前台登录用的form ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <for ...

  5. 关于Android Studio上得处女座福音功能——reformat code

    在mac上,选中需要的代码,然后 Option+(shift) + Command + L 全部重新排列!!爽飞!

  6. windows下安装ImageMagick

    最近在开发过程中用到了ImageMagick,结合网上的教程做一下记录 安装的具体步骤可以参考http://blog.csdn.net/belen_xue/article/details/728962 ...

  7. java.sql.SQLException: 无法转换为内部表示

    1. 我出这个错代码:wfef.setRow_num(rs.getInt(rs.getInt(12))); 2. 分析:rs.getInt(12)  得到的是int类型,rs.getInt(rs.ge ...

  8. CentOS下安装桌面环境

    1. 使用 yum grouplist 查看可用的 group 2. 使用 yum groupinstall 进行安装.例如:yum groupinstall GNOME Desktop

  9. HTML注册页面验证注册信息

    在这里主要介绍两种验证方式,一种是点击注册按钮后会提示最上方的出错位置,弹出窗口提示格式不对.另一种是利用鼠标事件,在鼠标进行不同操作时会有不同的click事件. 这两种都是利用javascript, ...

  10. java中抽象类跟接口的区别

    额,好吧,本来是打算转载些神马的,但是搜资料的过程中发现了一个专注与java的人,那就关注啦,以后多进他blog学习学习:http://www.cnblogs.com/chenssy/p/337670 ...