js完成 textArea 的 placeholder 换行

2024年5月15日 186次阅读 来源: 李俊杰

本日写textarea的placeholder 换行的要领，收集上找了很多材料，写的不太细致，只好本身写一个demo，现分享给人人。
收集上看到要领大概有jQuery的watermark，这类要领能够在chrome中完成，其他浏览器不能够，所以我挑选用js完成以下。
要点：
1,鼠标的核心事宜focus与blur;
2,jQuery的input与propertychange事宜;
当触发这些事宜的时刻转变textarea的value值;就这么简朴，上代码了,拿下来就能用。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <style>
            textarea {
                width: 675px;
                height: 150px;
                display: block;
                margin-left: 30px;
            }
        </style>
    </head>

    <body>
        <textarea id="text" maxlength="500"></textarea>
        <script>
            var placeholder = '1.儿童出行只含车位费，不含住宿费及门票等用度儿童门票不接受预定，请至景区门口自行购置。\n2.儿童车票与成人同价，如您的小孩不足80厘米，且不须要占车位，请在挑选人数时不要提交儿童人数，如身高为80厘米以上的儿童必需提交儿童人数。\n3.如您的小孩身高凌驾120厘米请直接挑选成人价，景区对特定人群有门票优惠政策参考温馨提示';
            $('#text').val(placeholder).css({
                color: '#ccc'
            });
            $('#text').focus(function() {
                if($(this).val() == placeholder) {
                    $(this).val('').css({
                        color: '#ccc'
                    })
                } else {
                    $(this).css({
                        color: '#333'
                    })
                }
            });
            $('#text').blur(function() {　　
                if($(this).val() == '') {　　
                    $(this).val(placeholder).css({
                        color: '#ccc'
                    })
                }
            });
            $(document).on('input propertychange', '#text', function(event) {
                if($(this).val() == placeholder) {
                    $(this).val('').css({
                        color: '#ccc'
                    })
                } else if($(this).val() == "") {
                    $(this).val(placeholder).css({
                        color: '#ccc'
                    }).blur();
                } else {
                    $(this).css({
                        color: '#333'
                    })
                }
            })
        </script>
    </body>

</html>
    原文作者：李俊杰
    原文地址: https://segmentfault.com/a/1190000010431966
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞