placeholder这个属性 input
input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题。
1、我们在使用这个标签的时候会习惯的加上placeholder这个属性,起到一个提示的作用,但是当我们的光标移入的时候提示的文字并没有消失,这样就不是我们想要的结果了,这时就需要在input的属性里面再加上两个属性:
onfocus="this.placeholder='' "
onblur="this.placeholder='需要输入的内容'"
很简单的方法,第一个属性的意思是当焦点在这个输入框时,placeholder的内容是空的,第二个属性的意思是当这个输入框失去焦点时显示的内容。
2、IE10及以下的版本并不支持这个属性,那么怎么让其在IE10以下仍然可以实现这个效果呢,只需要在js文件里面引入一段脚本即可:
这时你会发现,placeholder的字体颜色不是 我们需要的颜色,这时你需要在css里面添加一个新的类名 phcolor,对其进行操作就可以实现了。
3、同时还要注意的是,在其他浏览器里默认的输入的文字都是垂直居中的,但是在IE8中却是顶格,我们需要给其加上line-height属性,让里面的文字垂直居中。
暂时就这么多的内容了,以后发现问题会及时补充的。
placeholder这个属性 input的更多相关文章
- 使用Html.EditorFor()为文本框加上maxlength,placeholder等属性
当想通过Html.EditorFor()给文本框加上maxlength,placeholder等属性的时候,发现Html.EditorFor()没有提供可直接加上这些属性的重载方法,如何做到呢? □ ...
- angular 输入属性@Input , 输出属性@Output , 中间人模式
1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...
- HTML label标签的for属性--input标签的accesskey属性
本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...
- jquery 修改input输入框的 readOnly属性 && input输入框隐藏
html的代码 <div class="control-group"> <label class="control-label required&quo ...
- HTML-移动开发技巧 响应式布局 弹性布局
移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...
- HTML5-移动开发常用技巧与弹性布局的使用
一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.initial-scale ...
- html5 弹性布局
html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
随机推荐
- SpringMVC笔记2
响应数据和结果视图 返回值分类 1.返回值是String 返回值类型是字符串的,会根据返回的字符串去寻找相对应的jsp页面 @Controller @RequestMapping("/use ...
- C++容器简介1—stack
一.简介 stack是一种容器适配器(STL的容器分为顺序容器和关联容器,容器适配器),被设计来用于操作先进后出(FILO)结构的情景,在这种情况下, 元素的插入和删除都只能在容器的尾部进行. sta ...
- python 之 Django框架(模板系统、过滤器、simple_tag、inclusion_tag、Tags、母版、组件)
12.35 Django模板系统 {{ }}和 {% %},变量相关的用{{}},逻辑相关的用{%%} app02/views: # 模板语言测试函数 def template_test(reques ...
- 『Go基础』第8节 格式化输出
输出就是将数据信息打印到电脑屏幕上. 本节我们就来学习一下Go语言中的三种输出方式: Print().Println().Printf(). 1.Print() Print()主要的一个特点就是打印数 ...
- 一天一个Linux命令,第三天cat命令
命令:cat (中文猫的意思) 解释:cat命令连接文件并打印到标准输出设备上(如显示器),cat经常用来显示文件的内容 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容. ...
- 单实例dg软件从10.2.0.4版本安装至10.2.0.5.12
DG环境搭建需求,因此安装与主库相同的软件版本 1.主库软件版本10.2.0.5.12 2dg环境提供的是全新的10.2.0.4.0 3.安装步骤,安装10.2.0.5 静默安装 psu安装10.2. ...
- Python之TensorFlow的基本介绍-1
一.TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经 ...
- Java调用WebService方法总结(6)--XFire调用WebService
XFire是codeHaus组织提供的一个WebService开源框架,目前已被Apache的CXF所取代,已很少有人用了,这里简单记录下其调用WebService使用方法.官网现已不提供下载,可以到 ...
- Linux定时清理日志脚本
在应用疯狂打日志的情况下,服务器很容易被塞满磁盘. 先要写一个shell脚本,脚本如下. #!/bin/bash #----------------使用规范---------------- #1.该文 ...
- springboot超级详细的日志配置(基于logback)
前言 java web 下有好几种日志框架,比如:logback,log4j,log4j2(slj4f 并不是一种日志框架,它相当于定义了规范,实现了这个规范的日志框架就能够用 slj4f 调用) ...