HTML5中input为data型时不支持placeholder

最新推荐文章于 2022-05-27 21:36:46 发布
原创 最新推荐文章于 2022-05-27 21:36:46 发布 · 6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

在阅读《HTML5 Guidelines for Web Developers》时，发现input为data型时无法直接使用placeholder属性。为实现类似效果，可以采用JavaScript进行模拟。

最近在看Klaus Forster和Bernd Oggl著的《HTML5 Guidelines for Web Developers》，发现书中对于input元素的placeholder属性描述有疑问。书中在范例中写到

<input type=date name=birthday id=birthday placeholder="1978-11-24" >
但是我在实际测试的时候发现 placeholder属性在类型为date的input元素中不会起作用！换了多个支持HTML5的浏览器反复测试的结果都相同。于是乎，我到HTML5的娘家WHATWG上找了一下，果然是有相关内容，传送门 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary。访问之后发现placeholder属性对于date类型的input元素而言确实是无效的。

最低0.47元/天 解锁文章
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
div模拟input的placeholder属性
xiaoxu的博客
12-03 1535
今天有做到这么一个需求， 一个div输入框，它模拟input输入框，并且也模拟input输入框的placeholder属性，但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样，当输入为空的时候，要显示给用户 @了谁，所以这个placeholder的内容是会变化的。 在网上查了几种方式，使用js操作代价太大，行内css又不支持伪类，...
html5中新增的form表单属性
weixin_30448685的博客
01-06 455
html5中新增两个表单属性，分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中显示填写的选项。用户每提交一次，就会增加一个用于选择的选项 ...
input的type=“date“时placeholder不显示，解决方案
weixin_42178670的博客
05-18 2663
input的type="date"时placeholder不显示，解决方案 步骤如下： 1、使用伪类模拟 input[type="date"]::before { content: attr(placeholder); } 做完上面之后，会发现在使用的时候即使选了时间，这个placeholder会依旧存在，所以要使用第2步js控制 2、使用js控制placeholder展示与否，假定该时间选择器id=“time” let timeItem = document.getElementById("time"
整理下以前的问题 <input>类型为date(日期)情况下不支持placeholder
qq_34825758的博客
10-11 1637
input type="text" placeholder="请点击输入"/> script> document.querySelector("input").onclick = function (){ this.setAttribute("type","date"); } script> placeholder很好用，只是当i
html的placeholder：属性中的信息在输入字段为空时显示
chxuy的博客
01-13 372
placeholder ：在输入字段为空时显示，并会在字段获得焦点时消失。 可适用于以下的 类型：text, search, url, telephone, email 以及 password。 例
怎么让html的标签失去效果,使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决...
weixin_29430691的博客
06-03 843
本篇教程探讨了使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<最近使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。如果是这样的效果，那么客户体验是可想而知的差了。最后想了一下，想到用css+js双保险来搞定它。...
input type=date 移动端显示placeholder失效问题
S筱潇S四维Smile
03-04 1850
1.html ：监听input失去焦点和获取焦点的事件 &lt;input type="date" id="date" v-model="birthday" placeholder="出生年月日" @blur="inputBlur($event)" @focus="inputFocus($event)" /&gt; 2.css:用伪类去为input模拟一个pl
jQuery实现HTML5 placeholder效果实例
10-25
在HTML5中，`placeholder`属性为输入框（`<input>`）提供了一种非常有用的功能，即在用户输入之前显示提示性文本。这个文本在输入框获得焦点时消失，失去焦点且输入框为空时重新出现。然而，不是所有浏览器都支持...
基于JS实现html中placeholder属性提示文字效果示例
10-18
通过上述两种方法，我们可以为不支持`placeholder`属性的浏览器提供类似的功能。纯JavaScript实现更轻量级，适合不使用任何库的场景；而jQuery实现则利用了库的强大功能，使代码更加简洁。无论选择哪种方式，都可以...
实现input中date类型的placeholder功能
qq_36438460的博客
02-27 3275
在HTML5中，input新增了date的类型 如果我们想实现placeholder的显示，不可以直接设置placeholder属性 要想实现以下样式 点击前 点击后 可以采用事件绑定addEventListener和事件解绑removeEventListener来实现，代码如下： <input type="text" id="inputDate" placehol...
使input date支持placeholder方法
热门推荐
羽筠的博客
06-02 1万+
input type date 的 placeholder 支持性有一定问题，因为浏览器会针对此类型 input 增加 datepicker 模块，看上去没那么必要支持 placeholder。 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字，但是为了统一表单外...
HTML5日期输入类型(date)
03-02 8255
HTML5让Web程序员的工作变得异常简单，我们得到的不仅仅只有一个“日期”类型的input，还有一系列相关的日期、时间参数让我们自定义。我们虽然称之为“日期”类型，但这里的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。下面我将用实例加图文的方式向大家演示各种type的外观表现。 1. 日期()
简单方法让input date支持placeholder
weixin_30596023的博客
08-08 599
<input class="baixin-quan-info-box-time" type="text" onfocus="(this.type='date')" placeholder='起始时间' v-model="tnianxian1"> 先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 dat...
data-placeholder big5 乱码 html,HTML
weixin_39649660的博客
06-23 401
HTML五大浏览器IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera浏览器内核浏览器内核备注IETridentIE、猎豹安全、360极速浏览器、百度浏览器firefoxGecko可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内...
H5新特性 input type=date 在手机上默认提示显示无效解决办法
weixin_30539835的博客
09-28 803
目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。 那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。 移动端自带的日期控件确实是个好东...
HTML中placeholder用法
liulin_2003的博客
05-27 5201
placeholder
html5 input 默认数据 placeholder
沈纵情
06-07 2847
Runner:
vant2 输入框校验不通过时placeholder不为红色
最新发布
06-12
<think>我们正在处理的问题：在Vant2中，当输入框校验失败时，希望将placeholder的字体颜色变为红色。从用户提供的引用中，我们可以获得一些线索：引用[1]展示了如何使用`::v-deep`来修改van-field的placeholder样式（在Vue2环境中）。但是，这里修改的是默认状态下的placeholder颜色。引用[3]提到修改placeholder样式需要使用伪类元素`::-webkit-input-placeholder`，并且指出在scoped样式中可能需要使用深度选择器。然而，用户的需求是在校验失败时改变placeholder颜色。在Vant2中，校验失败时输入框通常会有一个错误的样式（比如文字变红），但默认情况下placeholder颜色可能不会改变。我们需要做的是：1.首先，确保在校验失败时，输入框有一个特定的类（比如van-field--error），这样我们可以针对这个状态设置placeholder样式。2.使用深度选择器（在Vue2中使用`::v-deep`或`/deep/`）来覆盖van-field组件的内部样式。根据引用[1]和引用[3]的提示，我们可以这样写：当输入框校验失败时，Vant2会自动给输入框添加一个`van-field--error`类。因此，我们可以通过这个类来修改失败状态下的placeholder颜色。解决方案：在组件的样式中（注意，如果使用了scoped，则需要深度选择器）：```css/*校验失败时的placeholder样式*/::v-deep.van-field--error.van-field__control::-webkit-input-placeholder{color:red!important;/*设置为红色*/}/*为了兼容性，通常还需要考虑其他浏览器的前缀*/::v-deep.van-field--error.van-field__control:-ms-input-placeholder{color:red!important;}::v-deep.van-field--error.van-field__control::-moz-placeholder{color:red!important;}```注意：由于placeholder的样式可能受到组件内部样式的影响，我们可能需要使用`!important`来覆盖。但是，我们需要注意的是，在Vant2中，校验失败时输入框的文本颜色会变红，但placeholder默认不会。我们正是针对这个状态进行修改。另外，如果上述选择器不起作用，可能需要检查实际渲染后的类名，确保我们使用的类名正确。由于用户使用的是Vant2，并且是Vue2环境，所以使用`::v-deep`是合适的。步骤：1.在组件的style标签中（加上scoped属性），添加上述CSS代码。如果用户的项目配置不支持深度选择器，可能需要尝试其他方式，比如去掉scoped（不推荐），或者使用全局样式（在全局样式表中写）：但是推荐使用深度选择器。示例代码：```vue<template><van-fieldv-model="value":rules="[{required:true,message:'请填写'}]"placeholder="请输入"/></template><stylescoped>/*在scoped样式中使用深度选择器*//*注意：如果使用less或sass，语法相同*/::v-deep.van-field--error.van-field__control::-webkit-input-placeholder{color:red!important;}.../*其他浏览器前缀*/</style>```注意：如果使用Sass或Less，确保语法正确。此外，如果用户使用了CSSModules，可能需要使用全局作用域（:global）包裹，但通常深度选择器已经可以解决问题。如果遇到问题，可以尝试将`::v-deep`放在选择器的最前面（Vue2.7+可能要求不同，但Vant2通常搭配Vue2.6及以下）。因此，我们给出解决方案：通过深度选择器，针对校验失败时的类名`.van-field--error`，修改其内部输入框的placeholder样式。如果还有问题，可能需要检查：-浏览器控制台是否有样式被覆盖？可以使用开发者工具查看placeholder的样式，并尝试调整选择器。-确保样式被正确加载（比如，检查是否因为权重问题导致样式未生效，可能需要提高权重，如使用!important）。以上便是解决方案。</think> 在 Vant 2 中实现输入框校验失败时 placeholder 变红的解决方案如下（基于 Vue 2 环境）： ### 解决方案代码 ```vue <template> <van-field v-model="value" :class="{ 'error-field': showError }" placeholder="请输入内容" :rules="[{ required: true, message: '不能为空' }]" @change="handleValidate" /> </template> <style scoped> /* 错误状态下的placeholder样式 */ ::v-deep .error-field .van-field__control::-webkit-input-placeholder { color: #ee0a24 !important; /* vant错误红色 */ } ::v-deep .error-field .van-field__control:-moz-placeholder { color: #ee0a24 !important; } ::v-deep .error-field .van-field__control::-moz-placeholder { color: #ee0a24 !important; } ::v-deep .error-field .van-field__control:-ms-input-placeholder { color: #ee0a24 !important; } </style> <script> export default { data() { return { value: '', showError: false } }, methods: { handleValidate(val) { // 实际校验逻辑，此处简化示例 this.showError = val.trim() === ''; } } } </script> ``` ### 关键说明 1. **动态类名控制** 通过 `:class="{ 'error-field': showError }"` 动态添加错误类名，只有校验失败时才应用红色样式 2. **深度选择器** 使用 `::v-deep` 穿透 scoped 样式限制[^3]，正确选择组件内部的 placeholder 元素 3. **浏览器兼容** 覆盖所有浏览器前缀的 placeholder 伪类： - `::-webkit-input-placeholder` (Chrome/Safari) - `:-moz-placeholder` (Firefox 18-) - `::-moz-placeholder` (Firefox 19+) - `:-ms-input-placeholder` (IE/Edge) 4. **样式优先级** 添加 `!important` 确保覆盖 Vant 默认样式[^1] 5. **校验触发** 通过 `@change` 事件触发校验逻辑，也可结合 Vant 的 Form 组件实现更复杂的校验 ### 效果对比 | 状态 | placeholder 颜色 | |------|-----------------| | 正常 | 默认 #ccc 灰色 | | 错误 | vant 红色 #ee0a24 | > 注意：实际项目需根据校验规则完善 `handleValidate` 方法，此处仅展示核心样式实现。如果使用 Vant Form 组件，可通过 `form.submit` 的返回结果批量设置错误状态。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值