模拟input的placeholder，textarea的字数监听，textarea的右下角三条线隐藏,placeholder样式修改

最新推荐文章于 2024-03-07 11:34:56 发布

hangGe0111

最新推荐文章于 2024-03-07 11:34:56 发布

阅读量629

点赞数 1

分类专栏： html 文章标签： input的placeholder textarea长度监听

本文链接：https://blog.csdn.net/hangGe0111/article/details/86477964

版权

本文介绍了如何在低版本IE中模拟input的placeholder，并实现textarea的字数监听功能。通过聚焦和失焦事件控制input的value达到placeholder效果，同时利用input和propertychange事件监听textarea的字符数量。

摘要由CSDN通过智能技术生成

1.模拟input的placeholder

（有些情况，需要兼容到低版本的IE，但placeholder在低版本的IE上不展示，就得兼容一下。思路：模拟placeholder，通过value来，使用聚焦和失焦事件控制）

2.textarea的字数监听有input和propertychange，判断浏览器，进行初始赋值；

3.代码

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>input textarea</title>
		<style type="text/css">
			.input_new {
				resize: none;
			}
			
			textarea::-webkit-input-placeholder,
			input::-webkit-input-placeholder {
				color: #cccccc;
			}
			
			textarea::-moz-input-placeholder,
			input::-moz-input-placeholder {
				color: #cccccc;
			}
			
			textarea::-ms-input-placeholder,
			input::-ms-input-placeholder {
				color: #cccccc;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>

	</head>