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

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. P2979 [USACO10JAN]奶酪塔Cheese Towers

    P2979 [USACO10JAN]奶酪塔Cheese Towers 背包dp 不过多了一个大奶酪可以压扁其他奶酪的 一开始写了个暴力82分.贪心的选择 然后发现,有如下两种规律 要么最优都是小奶酪, ...

  2. phpstorm的主题相关

    下载地址: http://phpstorm-themes.com/ 安装方法 JAR文件 导航->file->Import Settings->然后选择你刚才下载的JAR文件-> ...

  3. o'Reill的SVG精髓(第二版)学习笔记——第七章

    第七章:路径 所有描述轮廓的数据都放在<path>元素的d属性中(d是data的缩写).路径数据包括单个字符的命令,比如M表示moveto,L表示lineto.接着是该命令的坐标信息. 7 ...

  4. LeetCode12.整数转罗马数字 JavaScript

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  5. 使用js获取表单元素的值

    function getParams(formName) { var frmMain = document.getElementById(formName)?document.getElementBy ...

  6. 如何用hexo搭建个人博客. 亲测有效

    搭建博客: 安装node.js和git 以管理员身份进入cmd. 输入:  npm install -g cnpm --registry=https://registry.npm.taobao.org ...

  7. Floyd 算法详解

    Floyd-Warshall Floyd算法,是一种著名的多源最短路算法. 核心思想: 用邻接矩阵存储图,核心代码为三重循环,第一层枚举中间点k,二三层分别枚举起始点i与目标点j.然后判断经过中间点k ...

  8. Linux性能监控工具 gtop

    给大家介绍一款性能监控工具,个人对比界面比top美观,常用指标比较清晰毕竟top上的指标不是每个人都能熟悉,也不是所有指标参数都需要看,对于新手也不便查找,好了说的再多先上图大家参观一下. 1.安装需 ...

  9. Co. - Apple - MacBook Pro 快捷键

    Mac 键盘快捷键:https://support.apple.com/zh-cn/HT201236 从windows转到mac的童鞋,可能删除键是心中的一个痛,以前习惯一按delete什么都消失,其 ...

  10. web前端总结面试问题(理论)

    一个页面从输入url到页面显示加载完成,这个过程发生了什么? 1.浏览器根据请求的URL交给DNS域名解析,找到真实的IP,向服务器发起请求. 2.服务器交给后台处理完成后返回数据,浏览器接收文件(h ...