这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。

1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码:

  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入企业名称、统一社会信用代码或注册号"
  2. onfocus='if(this.value=="请输入企业名称、统一社会信用代码或注册号"){this.value="";}; '
  3. onblur='if(this.value==""){this.value="请输入企业名称、统一社会信用代码或注册号";};'>

其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:

  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
  2. onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
  3. onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>

在这个问题解决了以后,可能会出现文字不居中的问题,这时候只需要使用一个属性就可以,例如 line-height: 40px

2.也可以使用jquery实现:

    1. $(document).ready(function() {
    2. var vdefault = $('#keyword').val();
    3. $('#keyword').focus(function() {
    4. //获得焦点时,如果值为默认值,则设置为空
    5. if ($(this).val() == vdefault) {
    6. $(this).val("");
    7. }
    8. });
    9. $('#keyword').blur(function() {
    10. //失去焦点时,如果值为空,则设置为默认值
    11. if ($(this).val()== "") {
    12. $(this).val(vdefault); ;
    13. }
    14. });

i8浏览器不支持placeholder属性解决办法,以及解决后,文字不居中问题的更多相关文章

  1. 当浏览器不支持placeholder,所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  2. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  3. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  4. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

  5. 关于使用jquery时,ie8下提示对象不支持的属性或方法的解决办法

    转自:http://wapapp.baidu.com/auoong/item/538790fcbe87c834d7ff8cde 首先这个问题的前提是已经排除了常见的这个问题.下面说一种今天我碰到的一种 ...

  6. 对象不支持“attachEvent”属性或方法的解决办法

    有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可

  7. ecshop transport.js IE报错(608行),对象不支持此属性或方法 的解决办法

    解决办法: 将if (this.hasOwnProperty(k)) { 改为: if (this.hasOwnProperty && this.hasOwnProperty(k)) ...

  8. 基于jquery 的插件,让IE支持placeholder属性

    开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美, ...

  9. 有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除

    (一)placeholder 属性起到提示客户输入信息作用 (二)ie9以下出问题了 placeholder不支持 (三)解决办法 先贴html 加上jquery代码就可以了 关于表单获取焦点,chr ...

随机推荐

  1. 2018年暑假ACM个人训练题9(动态规划)解题报告

    A:m段最大字段和问题 https://www.cnblogs.com/yinbiao/p/9314528.html B:map的使用(根本就不是dp!!!) https://www.cnblogs. ...

  2. 火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥

    火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥   最近在用FireFox 调试时使用Https,连接 https网址 时发生错误. 在服务器密钥交换握手信息中 SSL 收到了一个 ...

  3. Openresty最佳案例 | 第8篇:RBAC介绍、sql和redis模块工具类

    转载请标明出处: http://blog.csdn.net/forezp/article/details/78616738 本文出自方志朋的博客 RBAC介绍 RBAC(Role-Based Acce ...

  4. Python常用模块之re

    1.正则表达式规则 2.Python正则常用模块 2.1.re.match与re.search 函数说明:re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match ...

  5. Aaliyun Linux 64 安装jdk+mysql+tomcat

    参考: http://www.blogjava.net/amigoxie/archive/2013/02/22/395605.html http://bbs.aliyun.com/read/17704 ...

  6. 【2017 World Final E】Need For Speed(二分)

    Sheila is a student and she drives a typical student car: it is old, slow, rusty, and falling apart. ...

  7. BZOJ1030: [JSOI2007]文本生成器(AC自动机)

    Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5984  Solved: 2523[Submit][Status][Discuss] Descripti ...

  8. DbUtils: JDBC Utility Component Examples翻译

    DbUtils:JDBC实用组件实例 这一页提供了一些展示如何使用DbUtils的示例. 基本用法 DbUtils是一个非常小的类库,因此浏览完所有类的javadoc不会花费很长时间.DbUtils的 ...

  9. Vue报错 [Vue warn]: Cannot find element

    在前端开发全面进入前端的时代 作为一个合格的前端开发工作者 框架是不可或缺的Vue React Anguar 作为前端小白,追随大佬的脚步来到来到博客园,更新现在正在学习的Vue 注 : 相信学习Vu ...

  10. thinkphp3.2.3实现多条件查询实例.

    $data = M("datainfo"); $projectsname = I('get.projectsname');//前台提交的模糊查询字段 // 查询条件 $where ...