输入框占位符placeholder
占位符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的更多相关文章
- [Sass]占位符 %placeholder
[Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余 ...
- 占位符(placeholder text)
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...
- IE8支持HTML5的占位符placeholder
/*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...
- tensorflow中常量(constant)、变量(Variable)、占位符(placeholder)和张量类型转换reshape()
常量 constant tf.constant()函数定义: def constant(value, dtype=None, shape=None, name="Const", v ...
- c++11模拟boost元占位符placeholder
准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什 ...
- sass 继承 占位符 %placeholder
@extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...
- RunTime运行时在iOS中的应用之UITextField占位符placeholder
RunTime运行时机制 runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语言API. 在我们平时编写的Objective-C代码中, 程序运行过程时, 其实最终 ...
- 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 ...
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
随机推荐
- redis sentinel哨兵的使用
哨兵模式是Redis集群管理的一种方式. 下面以Go语言为例介绍其使用方式. 使用举例 package main import ( "fmt" "strings" ...
- ecstore-自定义app里增加对应的wap的模板
注意第二个参数空第三个参数是自定义app名称$this->page('wap/member/recmembers.html','','ecstoreapprcomp2p');
- Linux下安装uci
Compiling UCI as stand alone cd ~ git clone git://nbd.name/uci.git ~/uci cd ~/uci cmake -DBUILD_LUA= ...
- [转]跳板机Jumpserve的生产环境配置
6.跳板机Jumpserver] Jumpserver是国内一款开源的轻便的跳板机系统,他们的官网:http://www.jumpserver.org/ 使用这款软件意在提高公司内部登录生产环境服 ...
- NPOI将DataGridView中的数据导出+导出Chart图表图片至Excel
#region 导出Excel private HSSFWorkbook Workbook = null; private Sheet SheetOne = null; private DataFor ...
- sqlserver触发器执行顺序【未经验证】
exec sp_settriggerorder @triggername = 'tr_customer_1', @order = 'first', @stmttype = 'insert',@name ...
- %cd% 与 %~dp0% 区别
@echo off echo path:%~dpnx0% ipconfig /all|findstr "\<IPv4 适配器\>" %cd% 在批处理和命令窗口都能使 ...
- java统计文件字母大小写的数量练习
import java.io.*; import java.lang.*; public class WordStatistic { private BufferedReader br; privat ...
- pytest.6.Parametrize Fixture
From: http://www.testclass.net/pytest/parametrizing_fixture/ 背景 @pytest.mark.parametrize 装饰器可以让我们每次参 ...
- pandas的离散化,面元划分
pd.cut pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=, include_lowest=False) ...