Safari/Chrome中placeholder属性实现不完整

最新推荐文章于 2021-06-21 00:55:34 发布

weixin_33836223

最新推荐文章于 2021-06-21 00:55:34 发布

阅读量114

点赞数

placeholder属性是HTML5中提出的，目前Firefox/Safari/Chrome/Opera都已经实现了。IE9仍然没实现。

但Safari/Chrome中有个问题，点击文本框内文字不消失。

如下

<!DOCTYPE html>
<html>
	<head>
		<title>Safari/Chrome中placeholder属性实现不完整</title>
		<meta charset="utf-8">
	</head>
	<body>
		<p>
			<input type="text" placeholder="username"/>
		</p>
	</body>
</html>

运行后将鼠标点入input输入框内，各浏览器表现如下。

Firefox/Opera中文字消失

Safari/Chrome中文字不消失

IE6/7/8/9不支持该属性，即不出现文字提示

https://developer.mozilla.org/en/HTML/Element/input#attr-placeholder

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33836223

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML5 placeholder属性详解

09-28

例如，Webkit内核的浏览器（如Chrome和Safari）和Firefox 19+使用以下CSS选择器： ```css /* 所有浏览器 */ ::-webkit-input-placeholder { color: #f00; } ::-moz-placeholder { color: #f00; } /* Firefox 19+ */...

input属性placeholder在iOS中显示不完整的解决方法

wmeng13的博客

11-14

7846

在这里一定要先设置input，再设置placeholder，不然会被覆盖注意注意：input样式一定要写在前面 input{ width: 8.5rem; height: 1.25rem; font-size: .6rem; } ::-webkit-input-placeholder{ font-size: .5rem; line-height:...

参与评论您还未登录，请先登录后发表或查看评论

关于Chrome 浏览器 input输入框当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法

砚之

08-04

1800

关于Chrome 浏览器 input输入框当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法遇到的困难，以及解决办法遇到的困难，以及解决办法 1. chrome 的placeholder不垂直居中的问题原因：这是chrome的一个bug，当placeholder的字体大小与本身要输入的字体大小不一致时，此时chrome的pl...

IOS下input的placeholder不垂直居中的问题

weixin_44994372的博客

10-25

1581

input的placeholder不垂直居中，input设置高度后，使用line-height只能使输入的文字垂直居中，但是placeholder不会居中，反而会偏上。就不上图了，遇到的小伙伴会知道啥意思的，直接上解决方法的代码 input::placeholder fz(14) font-family PingFangSC-Semibold font-weight:600;...

css设置了placeholder样式同时解决placeholder显示不完整

精神病

08-07

7156

1.如何设置placeholder属性的样式 input::-webkit-input-placeholder{ /* WebKit, Blink, Edge */ font-size: 20px; color: #ADADAD; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 20px; ...

input点击后placeholder中的提示消息消失

09-02

然而，在不同的浏览器环境下，`placeholder`的行为可能会有所不同，尤其是对于旧版本的Internet Explorer（IE10及更高版本）和其他主流浏览器如Chrome、Firefox和Safari。在描述的问题中，提到了一个特定的情况：...

placeholder:使html5输入占位符属性完全兼容

05-22

Chrome合金 Safari 4+ Firefox 3.5+ 歌剧错误/贡献要贡献或发送想法，请github给我发消息或分叉该项目建造使用占位符，您应该已经安装了并运行npm install uglify-js -g npm install uglify-js -g 。执照。

HTML5里的placeholder属性使用实例和美化显示效果的方法

09-28

如果检测到不支持`placeholder`属性，可以使用像MooTools、Dojo这样的JavaScript库来实现类似功能。 ### CSS美化`placeholder`效果 CSS提供了一些特定的选择器，允许我们对不同浏览器的`placeholder`文本进行样式...

html center 垂直居中,html – Safari中的垂直居中

weixin_42458128的博客

06-21

在Safari中我有垂直居中的问题,使用margin：auto 0;在div上嵌入div的div：inline-flex;它在Firefox,Chrome,Opera中运行得很好……但是在Safari中失败了(在默认的Android浏览器上,但我正在考虑使用单独的CSS以及iPad使用的任何内容) 和.container-fluid {margin-right: auto;margi...

chrome input 光标垂直居中问题

ISaiSai的专栏

12-23

5966

chrome 下设置较高的input 的时候，光标不会居中（即使设置了相同的height 和line-height）解决方法：部分高度使用相同 padding-top 和padding-bottom 代替 .heightTest { padding: 10px 0px;

解决 ios 输入框属性--placeholder--不显示

日积月累默默搬砖

03-01

3539

在我们写移动端项目时,会发现在IOS手机上,部分输入框的默认文字会隐藏,在此提供一套解决方法,此方法已经历过实际项目的测试,可放心的应用于实战将此段js代码放置在项目的公共js文件中即可 if (!('placeholder' in document.createElement('input'))) { $('input[placeholder],textarea[placeho...

input框的placeholder使用line-height在Safari上不垂直居中的问题

最新发布

09-13

所有源码，都是可以运行起来的

基于深度神经网络的模型预测控制器(mpc-DL-controller).zip

09-13

该项目旨在开发一种基于深度神经网络（DNN）的预测最优控制器，用于对受干扰的系统（包括HVAC、太阳能电池和电池）进行控制。传统的模型预测控制（MPC）虽然广泛应用于化工、炼油厂和电力系统等行业，但在处理大量数据和实现快速实时控制方面面临挑战。利用深度神经网络的优势，本研究模拟了一种线下最优控制方案，通过对HVAC系统与电网、电池和太阳能电池板的连接进行模拟，训练一个深度神经网络（包含六层，每层五十个单元），以实现无需显式控制计算或指令的MPC控制。该项目的实施展示了深度学习和模型预测控制相结合在复杂系统中的潜力。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看READMe.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。

Serial ATA revistion3.2 protocal SATA 3.2 协议 protocal

09-13

Serial ATA revistion3.2 protocal SATA 3.2 协议 protocal

基于java的装饰工程管理系统设计与实现.docx

09-13

基于java的装饰工程管理系统设计与实现.docx

基于java的小区物业智能卡管理的设计与实现.docx

09-13

基于java的小区物业智能卡管理的设计与实现.docx

UG 菜单工具条文件格式

09-13

UG 外挂开发时，使用的工具栏，菜单文件格式。

jsp中 placeholder字体大小

04-04

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 14px; } ::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; } :-ms-input-placeholder { /* IE 10+ */ font-size: 14px; } :-moz-...