给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. ACM学习历程—HDU5700 区间交(树状数组 && 前缀和 && 排序)

    http://acm.hdu.edu.cn/showproblem.php?pid=5700 这是这次百度之星初赛2B的第五题.省赛回来看了一下,有这样一个思路:对于所有的区间排序,按左值排序. 然后 ...

  2. Servlet、Filter、Listener

    1.Servlet 1.1servlet接口 All Known Implementing Classes:GenericServlet, HttpServlet GenericServlet:与协议 ...

  3. JUnit4学习

    参考:http://www.cnblogs.com/yangxia-test/p/3996120.html JUnit4是一个开源的java单元测试框架,我们只需要引入一个包,就可以使用它的功能 先说 ...

  4. jstl_fn方法库

    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 1,st ...

  5. 无敌JS关闭当前窗口代码,不弹出确认提示

    echo "<script type='text/javascript'>window.opener=null;window.open('','_self');window.cl ...

  6. Mac eclipse 连接 手机调试

    Mac eclipse 连接 手机调试 更新:2014-11-10 20:13 1 2 3 4 5 6 分步阅读 很多Android程序员 用Mac 来开发.但是Mac下eclipse连接 手机存在一 ...

  7. Python中if __name__ == 'main' 的作用和原理

    参考网址:http://mp.weixin.qq.com/s/kxxhOQ7KB_VMwWeUENX7OQ t1.py: print('Loving Python') def main(): prin ...

  8. tomcat 1字节的UTF-8序列的字节1无效

    微信支付时, 命名返回支付成功, 但是成功后却返回如下的错误, 在测试环境都是没有任何问题, 到客户现场后, 可能客户现场使用的4G网络, 用微信支付时一直报这样的错误 错误现象: com.sun.o ...

  9. composer 的设计原理及其基本用法

    相信有在用PHP的朋友近年来常听到composer这个套件管理工具.它到底是做什么用的?又是为了解决什么问题而存在呢? 要了解这个,得先从历史开始说起…. PHP最早加载类的方法 初学PHP时,最早会 ...

  10. srvctl和crs_start命令无法启动oracle RAC实例, 但sqlplus可以启动

    今天遇到一个奇怪问题,发现srvctl和crs_start命令无法启动Oracle RAC实例,但用sqlplus却可以正常启动.最终发现原因是在OCR中数据库的状态变成了disable,将此状态更改 ...