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

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. 根据ip确定城市

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. Maven Dependencies missing jar 解决

    在导入SVN项目之后发现Maven里面的pom.xml报错. 发现是Maven Dependencies 里面的jar包不完整. 我试过手动加入jar,但是不能成功,然后就又试着添加dependecn ...

  3. HDU 1222 Wolf and Rabbit(数学,找规律)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  4. GPU卡掉卡

    这几天用GPU卡跑东西,老是提示opencv的一个问题.但是我换个数据跑就没问题.说明代码是没问题的.发挥我作为女人的特质,从起试试吧.结果从起后找不到GPU卡了.nvidia-smi提示我没有安装最 ...

  5. 与JSON相关的问题

    1.JSON.stringify 与 JSON.parse 相关的问题 JSON.stringify 把字符串转化为字符串,JSON.parse把字符串转化为JSON格式 会出现的问题Unexpect ...

  6. udt通信java再次升级1.1版

    以前完成了udt的java代码测试,功能基本完成,近几天有时间重新梳理了下源码: 对原通信的关闭统一了方法,close定位过时,由shutdown与shutdownNow代替. 将一些主要方法添加了注 ...

  7. 监控tomcat工具使用

    用LambdaProbe监控Tomcat 简介: Lambda Probe(以前称为Tomcat Probe)是一款实时监控和管理的Apache Tomcat实例的基本工具.Lambda Probe ...

  8. node读写文件

    结束了一天的工作和学习,今天对于自己最大的收获就是node读写文件和对callback函数有了更深一步的理解.总结一下node读写的文件的注意事项吧(注意:下面讲的是增加数据的方法): 1.我们可以封 ...

  9. 蚯蚓(noip2016,贪心,单调性)

    题目描述 本题中,我们将用符号⌊c⌋ 表示对 c 向下取整,例如:⌊3.0⌋=⌊3.1⌋=⌊3.9⌋=3 . 蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭 ...

  10. HDU1159(LCS)

    #include<iostream> #include<algorithm> #include<cstring> #include<cstdio> us ...