占位符placeholder的益处不用多说,但是很不幸的是,在IE8之前的浏览器里是无法实现placeholder这一属性的,所以在需要兼容IE8之前的浏览器的情况下,我们不得不想办法模拟实现placeholder属性。

在前面的一篇文中《获取表单的初始值,模拟placeholder属性》中,就曾经讲过placeholder属性的模拟,这里再翻出来一遍,是因为又遇到了新的问题。

当输入值之后,再刷新页面,在火狐浏览器中,获取到的defaultValue会是新的输入值。

直接以之前的项目中一小段代码为例:

    <ul class="query-box">
<li><input type="text" value="请输入8位准考证号" placeholder="请输入8位准考证号" tabindex="1"></li>
<li class="img-verification">
<input type="text" value="请输入验证码" placeholder="请输入验证码" tabindex="2">
<div><img src="data:images/logo.png" alt=""></div>
</li>
<li>
<button tabindex="3">查询</button>
</li>
</ul>

该项目需要兼容到IE8,所以这里就必须解决IE8不支持placeholder这一属性的问题。项目中使用了jquery。

最开始的想法,就是使用初始值的方法,但是在火狐浏览器中测试时,发现了bug,当输入值之后,再刷新页面,火狐浏览器会记住所输入的值,作为初始值,导致不能完全模拟placeholder。只能转换方向,还是直接使用jquery方法来解决吧!

   var permissionNum = /^\d{8}$/;
  $(".query-box").find("input[type=text]").each(function (index, item) {
var defaultVal = $(this).prop('placeholder');
$(this).on("focus keydown", function () {
var val = $(this).val();
if (val == defaultVal) {
$(this).val("").css("color", "#448aca");
}
}).on("blur keyup", function () {
var val = $(this).val();
if (val == "") {
$(this).val(defaultVal).css("color", "#bababa");
}
// 校验准考证号码,符合8位数字,就高亮查询按钮
if (index == 0) {
var $target = $(this).parents(".query-box").find("button");
permissionNum.test(val) ? $target.addClass("active") : $target.removeClass("active");
}
})
});

  

也没有什么高深的东西,只要能转过这个弯来就可以了!

输入框占位符placeholder的更多相关文章

  1. [Sass]占位符 %placeholder

    [Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...

  2. 占位符(placeholder text)

    占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...

  3. IE8支持HTML5的占位符placeholder

    /*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...

  4. tensorflow中常量(constant)、变量(Variable)、占位符(placeholder)和张量类型转换reshape()

    常量 constant tf.constant()函数定义: def constant(value, dtype=None, shape=None, name="Const", v ...

  5. c++11模拟boost元占位符placeholder

    准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什 ...

  6. sass 继承 占位符 %placeholder

    @extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...

  7. RunTime运行时在iOS中的应用之UITextField占位符placeholder

    RunTime运行时机制 runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语言API. 在我们平时编写的Objective-C代码中, 程序运行过程时, 其实最终 ...

  8. based on Greenlets (via Eventlet and Gevent) fork 孙子worker 比较 gevent不是异步 协程原理 占位符 placeholder (Future, Promise, Deferred) 循环引擎 greenlet 没有显式调度的微线程,换言之 协程

    gevent GitHub - gevent/gevent: Coroutine-based concurrency library for Python https://github.com/gev ...

  9. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

随机推荐

  1. redis sentinel哨兵的使用

    哨兵模式是Redis集群管理的一种方式. 下面以Go语言为例介绍其使用方式. 使用举例 package main import ( "fmt" "strings" ...

  2. ecstore-自定义app里增加对应的wap的模板

    注意第二个参数空第三个参数是自定义app名称$this->page('wap/member/recmembers.html','','ecstoreapprcomp2p');

  3. Linux下安装uci

    Compiling UCI as stand alone cd ~ git clone git://nbd.name/uci.git ~/uci cd ~/uci cmake -DBUILD_LUA= ...

  4. [转]跳板机Jumpserve的生产环境配置

    6.跳板机Jumpserver]   Jumpserver是国内一款开源的轻便的跳板机系统,他们的官网:http://www.jumpserver.org/ 使用这款软件意在提高公司内部登录生产环境服 ...

  5. NPOI将DataGridView中的数据导出+导出Chart图表图片至Excel

    #region 导出Excel private HSSFWorkbook Workbook = null; private Sheet SheetOne = null; private DataFor ...

  6. sqlserver触发器执行顺序【未经验证】

    exec sp_settriggerorder @triggername = 'tr_customer_1', @order = 'first', @stmttype = 'insert',@name ...

  7. %cd% 与 %~dp0% 区别

    @echo off echo path:%~dpnx0% ipconfig /all|findstr "\<IPv4 适配器\>" %cd%  在批处理和命令窗口都能使 ...

  8. java统计文件字母大小写的数量练习

    import java.io.*; import java.lang.*; public class WordStatistic { private BufferedReader br; privat ...

  9. pytest.6.Parametrize Fixture

    From: http://www.testclass.net/pytest/parametrizing_fixture/ 背景 @pytest.mark.parametrize 装饰器可以让我们每次参 ...

  10. pandas的离散化,面元划分

    pd.cut pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=, include_lowest=False) ...