手机移动端input date placehoder不显示
要解决这个问题,我们可以伪造一个placehoder,通过css跟js来解决这个问题。
为什么要用js的原因是因为当你选择了时间之后,placehoder的文字没有清除掉,所以我们就需要把这个伪造的placehoder清除掉。
html:
<input type="date" class="agencyName" id="date" placeholder="请选择出生日期">
CSS
input[type="date"]:before{content: attr(placeholder);color:#;}
js:
/*删除伪造的placehoder*/
var o = document.getElementById('date');
o.onfocus = function(){
this.removeAttribute('placeholder');
};
o.onblur = function(){
if(this.value == '') this.setAttribute('placeholder','请选择出生日期');
};
手机移动端input date placehoder不显示的更多相关文章
- HTML5 input date 移动端 IOS 不支持问题
1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...
- HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)
不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...
- input date 支持placeholder属性
第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能 ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{ col ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
- 手机移动端网站开发流程HTML5
手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...
- iphone H5 input type="search" 不显示搜索 解决办法
H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...
- phpcmsV9手机站内容页有时内容不显示
phpcmsV9手机站内容页有时内容不显示,修改的办法是: 在文件phpcms\modules\wap\index.php 中 屏蔽第119行,即如下内容 //$content = $contentp ...
- H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例
H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...
- [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?
移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...
随机推荐
- Python虚拟环境笔记
虚拟环境 为什么需要虚拟环境: 到目前位置,我们所有的第三方包安装都是直接通过pip install xx的方式进行安装的,这样安装会将那个包安装到你的系统级的Python环境中.但是这样有一个问题, ...
- Kafka 0.11新功能介绍:空消费组延迟rebalance
Kafka 0.11新功能介绍:空消费组延迟rebalance 在0.11之前的版本中,多个consumer实例加入到一个空消费组将导致多次的rebalance,这是由于每个consumer inst ...
- Ubuntu下软件安装的几种方式,apt,dpkg工具的使用
通常 Linux 上的软件安装主要有四种方式: 在线安装 从磁盘安装deb软件包 从二进制软件包安装 从源代码编译安装 这几种安装方式各有优劣,而大多数软件包会采用多种方式发布软件,所以我们常常需要全 ...
- 【适合N卡独显电脑的环境配置】Tensorflow教程-Windows 10下安装tensorflow 1.5.0 GPU with Anaconda
注意: 1.目前Anaconda 更新原命令activate tensorflow 改为 conda activate tensorflow 2. 目前windows with anaconda 可以 ...
- 转://因触发器限制导致oracle用户登录失败
使用PL/SQL DEV登录数据库时,出现如下错误 手工创建了test用户,通过dev工具登录没问题.怀疑数据库中有些用户限制了登录的.再看错误编号:ORA-20001,oracle保留的异常错误号范 ...
- 转://Oracle A用户给B用户授权查询指定表或视图权限方案
用DNINMSV31账户登录数据库进行如下操作: CREATE USER NORTHBOUND IDENTIFIED BY NORTHBOUND DEFAULT TABLESPACE "TB ...
- 路由器安装Openwrt&&***
路由器安装Openwrt&&*** 前言 对于给路由器刷系统,肯定是有风险的,敢于承担风险的才开始动手. Openwrt其实也是一款嵌入式Linux系统,对于闪存大小也是有一定的要求的 ...
- [ASP.NET]ScriptManager控件使用 转载
目录 概述 局部刷新 错误处理 类型系统扩展 注册定制脚本 注册 Web 服务 在客户端脚本中使用认证和个性化服务 ScriptManagerProxy 类 添加 ScriptManager 控件 客 ...
- face detection[Face R-CNN]
face r-cnn是腾讯ai实验室的作品,而且登录过腾讯ai实验室官网,发现果然硕果累累,不得不佩服. 1 引言 人脸检测虽然相对之前有了不小的进步,可是还是因为真实世界中人脸图像的明显变化导致仍然 ...
- Git安装以及常用命令(图文详解)
**Git安装以及常用命令** 1.下载安装Git,傻瓜式安装相信大家都会. 官网下载地址:[https://git-scm.com/downloads] 2.Git基本操作 (1)git --ver ...