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. c# 用XmlWriter写xml序列化

    using System.Text; using System.Xml; using System.Xml.Schema; using System.Xml.Serialization; using ...

  2. Django-01-Web框架简介

    1. 什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有 ...

  3. vue中$router与$route的区别

    $.router是VueRouter的实例,相当于一个全局的路由器对象.包含很多属性和子对象,例如history对象 $.route表示当前正在跳转的路由对象.可以通过$.route获取到name,p ...

  4. List集合String字符串按照汉语拼音排序

    public static void main(String[] args) { List<Map<String, Object>> mapList = new ArrayLi ...

  5. go 学习笔记(4) package

    package name 尽量与目录名称一样 package name: 表示代码文件所属的包

  6. ByteBuf源码

    ByteBuf是顶层的抽象类,定义了用于传输数据的ByteBuf需要的方法和属性. AbstractByteBuf 直接继承ByteBuf,一些公共属性和方法的公共逻辑会在这里定义.例如虽然不同性质的 ...

  7. Oracle——无法在查询中执行 DML 操作

    今天在调用Oracle Function遇到一个异常

  8. Java中 StringBuffer StringBuilder String 区别

    String       字符串常量   不可变  使用字符串拼接时是不同的2个空间 StringBuffer  字符串变量   可变   线程安全  字符串拼接直接在字符串后追加 StringBui ...

  9. Django流程图(精简版)

    网址: https://www.processon.com/view/link/5dddb0f8e4b074c442e5c68c

  10. JavaScript字符串Format

    一直用C#编程,在日常字符串拼接中string.Format()一直是个很好用很常用的方法,不用自己+++,既影响开发效率也影响可读性 然而在js中并没有这样的函数可供使用,so整理了一个js的字符串 ...