master

分支 (2)

管理

管理

master

dev_test

web-test
/
div自定义textArea输入框.html

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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>自定义输入框</title>


		<style>
			/* 解决IE6-8换行会出现p标签的问题 */
			.custormInput p {
				margin: 0;
			}

			.custormInput {
				width: 400px;
				min-height: 120px;
				/* 最小高度 */
				max-height: 300px;
				/* 最大高度 */
				_height: 120px;
				margin-left: auto;
				/* 外间距 */
				margin-right: auto;
				padding: 3px;
				/* 内间距 */
				outline: 0;
				/* 解决现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框 */
				border: 1px solid #a0b3d6;
				font-size: 12px;
				word-wrap: break-word;
				overflow-x: hidden;
				overflow-y: auto;
				_overflow-y: visible;
				-webkit-user-modify: read-write-plaintext-only;
				-moz-user-modify: read-write-plaintext-only;
				-ms-user-modify: read-write-plaintext-only;
				user-modify: read-write-plaintext-only;
			}

			.custormInput:focus {
				box-shadow: 0 0 6px rgba(0, 100, 255, .45);
				border-color: #34538b;
			}

			/* 实现默认提示功能 */
			.custormInput:empty:before {
				content: attr(placeholder);
				color: rgba(0, 0, 0, .5);
			}

			/* 模仿placeholder*/
			.custormInput:focus:before {
				content: none;
			}
		</style>

	</head>

	<body>
		<!-- contenteditable 设置为 true标签就可以编辑了 -->
		<div class="custormInput" id="custormInput" contenteditable="true" placeholder='在这里输入您的留言或建议'></div>

		<!-- 复制的问题 -->
		<script>
			var box = document.getElementById("custormInput");
			if (!history.pushState || document.msHidden != undefined) {
				box.innerHTML = "";
			}
			if (typeof document.webkitHidden == "undefined") {
				box.onpaste = function() {
					return false;
				}
			}
		</script>
		<script src="../div_custorm_input/js/jquery-1.12.4.js"></script>
		<!-- 监听自定义输入框的事件 -->
		<script>
			$(document).ready(function() {
				/* 在文本节点的值发生变化时触发。 */
				$(".custormInput").on("DOMCharacterDataModified", function() {
					console.log("在文本节点的值发生变化时触发。");

				});
				/* 在一个节点作为子节点被插入到另一个节点中时触发。 */
				$('.custormInput').on("DOMNodeInserted", function() {
					console.log("在一个节点作为子节点被插入到另一个节点中时触发。");

				});
			});
		</script>

		<!-- <script src="https://code.jquery.com/jquery-1.12.4.js" -->
		<!-- integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> -->
	</body>
</html>