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

最新推荐文章于 2026-06-21 10:51:37 发布

原创

最新推荐文章于 2026-06-21 10:51:37 发布 · 757 阅读

标签

#input的placeholder #textarea长度监听

收录于

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

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>

	<body>

		<div style="margin: 20px;color: red;">右下角的三条线</div>
		<textarea class="input_old" placeholder