input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题。

1、我们在使用这个标签的时候会习惯的加上placeholder这个属性,起到一个提示的作用,但是当我们的光标移入的时候提示的文字并没有消失,这样就不是我们想要的结果了,这时就需要在input的属性里面再加上两个属性:

onfocus="this.placeholder='' "
onblur="this.placeholder='需要输入的内容'"

很简单的方法,第一个属性的意思是当焦点在这个输入框时,placeholder的内容是空的,第二个属性的意思是当这个输入框失去焦点时显示的内容。

2、IE10及以下的版本并不支持这个属性,那么怎么让其在IE10以下仍然可以实现这个效果呢,只需要在js文件里面引入一段脚本即可:

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

这时你会发现,placeholder的字体颜色不是 我们需要的颜色,这时你需要在css里面添加一个新的类名 phcolor,对其进行操作就可以实现了。

3、同时还要注意的是,在其他浏览器里默认的输入的文字都是垂直居中的,但是在IE8中却是顶格,我们需要给其加上line-height属性,让里面的文字垂直居中。

暂时就这么多的内容了,以后发现问题会及时补充的。

placeholder这个属性 input的更多相关文章

  1. 使用Html.EditorFor()为文本框加上maxlength,placeholder等属性

    当想通过Html.EditorFor()给文本框加上maxlength,placeholder等属性的时候,发现Html.EditorFor()没有提供可直接加上这些属性的重载方法,如何做到呢? □ ...

  2. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  3. HTML label标签的for属性--input标签的accesskey属性

    本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...

  4. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  5. HTML-移动开发技巧 响应式布局 弹性布局

    移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...

  6. HTML5-移动开发常用技巧与弹性布局的使用

    一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.initial-scale ...

  7. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  8. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  9. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

随机推荐

  1. Word 自带公式使用方法技巧(11)

    1. 快捷命令 在Word中输入「Alt+=」,可以打开Word中自带公式编辑器.这个编辑器似乎没有什么特别,但其实 Word 2010 以后是支持 LaTeX 语法的.常用规则如下: 分号: a/b ...

  2. c++ 初始化

    1. 内置类型默认初始化 内置类型如果没有被显示初始化,则会被编译器默认初始化.初始化会根据①变量类型的不同②变量类型位置,来决定初始化之后的值.但是内置类型如果在函数体内部,则将不被初始化——也就是 ...

  3. 为什么我们要用Spring Boot?

    为什么我们要用 Spring Boot,Spring Boot 最重要的功能是:自动配置. 为什么说是自动配置? Spring Boot 的开启注解是:@SpringBootApplication,其 ...

  4. [UOJ #140]【UER #4】被粉碎的数字

    题目大意:定义$f(x)$为数字$x$每一位数字的和,求$\sum\limits_{i=1}^R[f(x)=f(kx)]$.$R\leqslant10^{18},k\leqslant10^3$ 题解: ...

  5. java之hibernate之crud

    这篇文章主要讲解: 1>.对Hibernate使用的一些简单封装: · 2>.在单元测试中,使用Hibernate的封装的工具进行增删改查的测试 1.目录结构展示 2.代码展示 2.0 配 ...

  6. 用js写的简单的下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. apache的虚拟域名rewrite配置以及.htaccess的使用。

    在web服务器领域,Apache基本上是一统天下的,虽然现在越来越多的人转向nginx的,但是仍然由于apache的高性能以及强大的功能,还是大多数服务器在使用Apache. apache的安装就先不 ...

  8. Restful api 返回值重复的问题

    Spring boot全家桶前后端分离的项目,在扩充某一个列表形式的返回值时,发现返回值出现了一批的重复. 正常的数据返回: 数值完全一致只是参数名称区分了大小写,如下图: 推测可能是restful格 ...

  9. Linux下系统调用的组成与实现

    主要包括三个部分:(1)唯一的系统调用号(System Call Number):(2)系统调用表中相应的表项,即具体的函数地址:(3)对应的具体函数,即系统调用函数体. 以getpid()POSIX ...

  10. 小米cc9和vivo z5 对比

    (一)大致对比 1.小米 cc9(6GB+128GB.  1899元. 白色恋人(白色)) https://item.mi.com/product/10000163.html 2.vivo Z5 (6 ...