input type="date" 提示不显示

车家大少爷

于 2018-08-30 15:07:41 发布

阅读量5.6k

点赞数 1

分类专栏：日常问题文章标签： js jquery html css java

本文链接：https://blog.csdn.net/qq_39816586/article/details/82221413

版权

日常问题专栏收录该内容

19 篇文章 1 订阅

订阅专栏

在app中，引用 input 时间类型时，发现提示信息没有显示。
原本情况：
在这里插入图片描述
修改后如下：

HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>type="date" 提示不显示</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">
	</head>
	
	<style type="text/css">
		input[name="time"]:before{
			color:#A9A9A9;content:attr(placeholder);
		}
		input[name="time"].full:before {
			color:black;content:""!important;
		}
	</style>

	<body>
		
		<input type="date" name="time" placeholder="请选择日期">
		<input type="datetime-local" name="time" placeholder="请选择日期">
		
	</body>
	
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

	<script type="text/javascript">
		//input type=date 日期的提示清除
		$("input[name='time']").on("input",function(){
			if($(this).val().length>0){
				$(this).addClass("full");
			}else{
				$(this).removeClass("full");
			}
		});
	</script>
</html>