div自定义textArea输入框

最新推荐文章于 2024-05-16 10:14:39 发布

90后纳税人

最新推荐文章于 2024-05-16 10:14:39 发布

阅读量734

点赞数

分类专栏： HTML

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/ShuTongIt/article/details/103964894

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!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>

90后纳税人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div自定义textArea输入框

<!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...
复制链接

扫一扫