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

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. JDBC执行存储过程的四种情况 (转)

    本文主要是总结 如何实现 JDBC调用Oracle的存储过程,从以下情况分别介绍: [1].只有输入IN参数,没有输出OUT参数 [2].既有输入IN参数,也有输出OUT参数,输出是简单值(非列表) ...

  2. javascript之Window 对象

    一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗口. 二.Window窗口 ...

  3. 【题解】洛谷P3200 [HNOI2009] 有趣的数列(卡特兰数+质因数分解)

    洛谷P3200:https://www.luogu.org/problemnew/show/P3200 思路 这题明显是卡特兰数的题型咯 一看精度有点大 如果递推卡特兰数公式要到O(n2) 可以证明得 ...

  4. c#本地缓存实现

    用了一段时间java,java实现服务端程序很简单,有很多公共开源的组件或者软件.但是c#的很少. 现在准备自己写点东西,学习下新的东西,总结下c#的内容以及我们经常用的内容,抽离成类,组件,模型.方 ...

  5. ABAP术语-BAPI (Business Application Programming Interface)

    BAPI (Business Application Programming Interface) 原文:http://www.cnblogs.com/qiangsheng/archive/2007/ ...

  6. JavaScript--动态添加元素(纯js书写table并删除数据)

    本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...

  7. bootstrap实现分页

    bootstrap分页功能 写前端都会面临的一个问题就是分页,如果是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于用bootstrap框架分页的例子,希望以后可以帮助到一些对这方面比较 ...

  8. 使用公共的存储过程实现repeater的分页

    当一个项目repeater分页多的时候使用公共的存储过程实现分页,是不错的选择 ALTER PROC [dbo].[P_Common_proc] -- 通用分页存储过程 @TableName varc ...

  9. js分割字符串

    js分割字符串 我想达到通过 : 分割 只要第一次分割,后面的内容不使用分割 不行,没找到可以直接用的方法,不过可以通过其它方式达到效果 eg: str.split(':',2)[0] (第一个分隔符 ...

  10. mongodb的windows系统下安装

    先下载安装包,地址有下面两个,按需选择吧. https://www.mongodb.com/download-center/v2/community https://www.mongodb.org/d ...