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 属性 ...
随机推荐
- Wireshark 抓包过滤器学习
Wireshark 抓包过滤器学习 wireshark中,分为两种过滤器:捕获过滤器 和 显示过滤器 捕获过滤器 是指wireshark一开始在抓包时,就确定要抓取哪些类型的包:对于不需要的,不进行抓 ...
- 如何解决visual studio2017 install 下载安装极慢的问题
问题: visual studio 2017 下载安装速度慢,只有6.70kb/s.其他版本估计也有这个问题. 解决方案: 进入目录:C:\Windows\System32\drivers\etc 右 ...
- 《学渣的电子技术自学笔记》——二极管的工作频率与PN结结面积的关系
<学渣的电子技术自学笔记>--二极管的工作频率与PN结结面积的关系 书本原文 :按结构分,二极管有点接触型.面接触型和平面型三类.点接触型二极管(一般为锗管)的PN结结面积很小(结电容小) ...
- Testbench编写技巧
一.基本架构(常用模板) `timescale 1ns/1ps //时间精度 `define Clock //时钟周期 module my_design_tb; //================= ...
- Git使用整理
[本文由水木桶首发于博客园,原文地址:https://www.cnblogs.com/shuimutong/p/11404664.html,未接允许,严禁转载] 背景 很久之前使用的是svn,直接在E ...
- MySQL Index--NOT IN和不等于两类操作无法走索引?
经常被问,NOT IN和<>操作就无法走索引? 真想只有一个:具体问题具体分析,没有前提的问题都是耍流氓. 准备测试数据: ## 删除测试表 DROP TABLE IF EXISTS tb ...
- MySQL DataType--隐式类型转换
隐式类型转换 在官方文档中对隐式类型转换规则有如下描述: 1. If one or both arguments are NULL, the result of the comparison is N ...
- 交叉编译openssl1.1.1a
交叉编译openssl1.1.1a的时候遇到的问题,记录一下,方便下次查找 一.下载源码 1.打开openssl官网,下载openssl-1.1.1.tar.gz源码包. 2.执行下面的命令解压源 ...
- django--模型字段引用
如果内置字段不起作用,您可以尝试使用django-localflavor(文档),其中包含对特定国家和文化有用的各种代码片段. 此外,您可以轻松编写自己的自定义模型字段. 注意 从技术上讲,这些模型是 ...
- 学习python的日常2
---恢复内容开始--- 数组list 添加用.append(i,'xxx')方法 删除用.pop(i)方法,其中i为索引位置 数组可以直接作为元素插入数组 元组tuple(初始化后不能改变,所谓不变 ...