input的placeholder属性

2024-11-08

认识input输入框的placeholder属性

我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password) 该提示会在输入字段为空时显示,并会在字段获得焦点时消失(IE10+获取焦点消失,Chrome,FF等在输入有值时消失). IE10+,Chrome,Firefox,Safari支持placeholder属性(I

Hmtl5 <input>中placeholder属性（新属性）

Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password. 注意:placeholder 属性是 HTML5 中的新属性. 二.示例代码: <form

input 的 placeholder属性在IE8下的兼容处理

placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿placeholder属性的样式,并给input 的value赋值placeholder属性的值 2. input的type属性是password的情况,用上面的方法处理提示语为密码文处理思路: 新添加一个标签,模仿placeholder属性直接上代码: css部分: .input-item {

修改 input / textarea placeholder 属性的颜色和字体大小

话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; font-size: 16px; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; font-size: 16px; } input:-moz-placeholder

前端 html input标签 placeholder属性标签上显示内容

前端 html input标签的placeholder属性标签上显示内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: auto&q

解决input标签placeholder属性浏览器兼容性问题的一种方法

为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属性,此时必须通过另外的方式来实现输入提示. 其实,我们可以利用label标签来模拟placeholder属性.先看例子,后解释: <!DOCTYPE html> <html> <head> <script type="text/javascript"

angular自定义指令解决IE89不支持input的placeholder属性

下面代码实测通过,直接copy到本地运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/angular.js/1.2.14/angular.min.js"></script> <style>

ie8不兼容input的placeholder属性但是要实现其效果的方法

通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容使用position定位好两个元素标签第一要隐藏两个元素标签display:none,在中设置style样式为display:inline-block 使用js控制效果,通过给页面绑定点击事件并且利用target对象做判断,控制两个元素标签的显藏: 点击的对象是元素标签,当前点击对象隐藏,判断另外的输入框值是否为空,是否隐藏显示

修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

一.修改input元素placeholder属性样式在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholder样式(也有可能是遇到了一个处女座的设计师或者是客户),就不等不修改一下placeholder的样式.可以通过下面的代码修改样式: /*Chrome.Safari等 webkit内核浏览器*/ ::-webkit-input-placeholder{ color:red; } /*Firefox*/

让IE下支持Html5的placeholder属性

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现 , firefox.google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type

IE如何兼容placeholder属性

在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下方法: <script type="text/javascript"> if (!('placeholder' in document.createElement('input'))) { $('input[placeholder],textarea[placeholder]'

HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE) 适用范围:placeholder 属性适用于下面的

转： HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中, 会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE)适用范围:placeholder 属性适用于下面的

Html5的placeholder属性(IE兼容)

HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设置了该属性后.该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.曾经要实现这效果都是用JavaScript来控制才干实现 , firefox.google chrome等表示对其支持 , 只有IE存在违和感啊! 比如: <input id="t1" type

如何更改placeholder属性中文字颜色

如何更改placeholder属性中文字颜色 placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE) 适用范围:placeholder 属性适用于下面的 input 类型:text.search.url.tel.email 和 password. 因为是HTML5中新增的属性,所以会存在兼容性问题.下面说说浏览器的支

input placeholder属性样式修改(颜色,大小,位置)

placeholder属性样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12p

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

当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/7./i)=="7." || navigator.appVersion.match(/8./i)=="

HTML 5 <input> placeholder 属性

原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 HTML 5 <input> 标签实例带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <input type="search" n

改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的解释: <input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" m

完美让IE兼容input placeholder属性的jquery实现

调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:12 */ (function ($) { //判断是否支持placeholder function isPlaceholer() { var input = document.createElement("input"); return "placeholder" in

HTML5 input控件 placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示,并会在字段获得焦点时消失. <input placeholder="请输入姓名"> 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.

input的placeholder属性

热门专题