手机端input[type=date]的时候placeholder不起作用解决方案

最新推荐文章于 2024-08-24 14:24:27 发布
最新推荐文章于 2024-08-24 14:24:27 发布
阅读量1.6k 收藏
点赞数
分类专栏： 大前端爬坑之路 web移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/84111207
版权
博客探讨了手机端input[type=date]类型的placeholder在不同浏览器中的表现，指出iOS和安卓虽然支持date类型，但placeholder属性失效的问题。为解决这个问题，提出了结合CSS和JS的方法，通过设置input的value和使用伪类模拟placeholder，同时使用JS监听用户选择，动态管理placeholder属性。
摘要由CSDN通过智能技术生成

手机端input[type=date]的时候placeholder不起作用解决方案

 

目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。
那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好，很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值，但必须是日期格式才会正确显示，否则就会直接忽略掉。

 

1

<input type="date" value="2012-05-10" id="date">

但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。

CSS部分

了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
H5移动端常见问题
happy任的博客
04-13 2293
h5 常见问题 1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 一、HTML 页面结构 // width 设置 viewport 宽度，为一个正整数，或字符串 'device-width' // height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // mi...
解决前后端分离开发中登录验证码 跨域和session不一致问题
weixin_44543219的博客
06-16 2731
使用工具：HBuilderX 使用语言：H5、jQuery、CSS 开发模式：前后端分离前后端分离开发模式下，实现网页的验证登录问题点1的解决方案：问题点2的解决方案：问题点3的解决方案：通过blob的处理，生成一个URL，作为图片的src属性的值，显示验证码图片问题点4的解决方案：加上时间戳，可以实现点击图片换一张的效果 获取验证码 点击登录验证 4.获取用户信息 5.页面加载事件 6.全局参数...
H5新特性 input type=date 在手机上默认提示显示无效解决办法
weixin_30539835的博客
09-28 732
目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。 那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。 移动端自带的日期控件确实是个好东...
input的type=“date“时placeholder不显示，解决方案
weixin_42178670的博客
05-18 2223
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"
HTML5新增的input表单
最新发布
听海边涛声
08-24 148
HTML5新增的input表单
input type="date" 提示不显示
sam的博客
08-30 5699
//CSS input[type=&quot;date&quot;]:before{ color:#A9A9A9;content:attr(placeholder); } input[type=&quot;date&quot;].full:before { color:black;content:&quot;&quot;!important; } //HTML &amp;lt;input type=&quot
input type=date 移动端显示placeholder失效问题
S筱潇S四维Smile
03-04 1658
1.html ：监听input失去焦点和获取焦点的事件 &lt;input type="date" id="date" v-model="birthday" placeholder="出生年月日" @blur="inputBlur($event)" @focus="inputFocus($event)" /&gt; 2.css:用伪类去为input模拟一个pl
ios、移动端 input type=date无法点击的问题解决方法
weixin_30411997的博客
01-15 1396
正常用input type = “text”,获取焦点的时候，将type 改成 date即可。 <div class="form-item"> <label for="birthday" class="property">生日</label> <input class="input-item" type="text" id="...
Html5页面上如何禁止手机虚拟键盘弹出
11-21
<input type="text" id="readOnlyInput" readonly placeholder="不可编辑的输入框"> ``` 优点： 1. 实现简单，只需添加`readonly`属性。 2. 在大部分浏览器和设备上都能有效防止虚拟键盘弹出。 缺点： 1. 在iOS的...
总结40条常见的移动端Web页面问题及解决方案
weixin_36106791的博客
08-17 491
前言 工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，这是在前一篇基础上，整理网友的经验，希望对大家有用。 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把 iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
ios手机系统中 input type=“date“日期控件显示不出来解决方法
farmerXU的博客
07-28 1764
测试给input type="date"要给它加上个val行不行，结果还是没有效果； 最后给它加上宽高以后就显示出来了； <input type="date" class="searchvalue" style="width:125px;height:25px;background-color:white" value=""/>
关于IE11浏览器input标签type=“date“ 不显示日期控件的解决
qq_51745363的博客
03-13 1589
问题：写了input标签且type=”date“，但是在IE浏览器不兼容。
input date显示类似placeholder效果 ios安卓兼容
JIZQAQ学习&踩坑笔记本
01-24 617
先叨叨一个踩坑历程。 我最开始是使用了类似下面这种方式，最开始type为text，当进行点击后换成date。 在pc端测试的时候看起来还不错，但是到手机上测试发现，需要双击那个框框才能做到出现日历供选择。 &lt;input type="text"onfocus="(this.type='date')" placeholder="Start Date"value=""/&gt; 后...
手机上无法显示日期值，使用h5的Input type="date"
weixin_33698043的博客
12-01 736
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序使用input组件点击input上清空图标不生效解决方法
qq_39454432的博客
06-03 2241
微信小程序中使用input组件，点击上面的清空图标不生效问题 问题原因：因为微信小程序中input组件的层级比较高，会 覆盖清空图标，所以点击不生效 解决方法： 第一种方法：设置input的宽度，input组件在左边，清空图标放在右边。不要试图将清空图标放在input组件的上面，清空图标使用 cover-view 和 cover-image 组件也不可以。 第二种方法： 设置 input 的 padding-right 大于图标的宽度。 ...
input中type为date的格式，只能选择今天之后的日期
橙子味少女风的博客
08-05 2399
input的type属性为date时，只能选择今天之后的日期
初学者：微信小程序中input使用forcus属性不起作用
redrose311的博客
03-11 1014
<input focus="true" type="number"/> 经测试，微信开发者工具中focus自动获取焦点并调出键盘，但是并没有起作用，用手机预览时，是可以看到效果的。暂时还没有找到解决办法
type=‘date’的input标签
热门推荐
bowen11233的博客
11-04 3万+
最近在写一个手机网页时，要求使用原生的手机时间控件。需要使用标签，之前并没有注意过type=‘date’的用法，在使用时也遇到了很多问题。在此一一总结一下： 1.首先调用浏览器自带时间控件，input的type属性有以下几种写法： type=’date’ //显示年、月、日 type=‘month’//显示年、月
<input type="email" placeholder="Enter your email" required>的具体作用
05-15
`<input type="email" placeholder="Enter your email" required>` 是一个 HTML 元素，用于在网页中创建一个文本框，要求用户输入电子邮件地址。其中 `type="email"` 表示该文本框接受的输入必须符合电子邮件地址的格式；`placeholder="Enter your email"` 是一个占位符，用于在文本框中显示提示信息，帮助用户输入正确的内容；`required` 属性表示该输入框必须填写，否则无法提交表单。使用这个元素可以方便地收集用户的电子邮件地址，同时也可以对输入进行一定的格式验证，提高数据的准确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值