<textarea>输入框提示文字

最新推荐文章于 2022-12-27 12:43:35 发布

转载最新推荐文章于 2022-12-27 12:43:35 发布 · 2.9k 阅读

javascript 专栏收录该内容

116 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS在<textarea>元素中显示帮助文字的方法，并展示了如何利用JavaScript增强用户体验，最后提到了现代浏览器中利用placeholder属性简化实现的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.cnblogs.com/Jener/p/6115278.html

示例

实现代码

<style>
        textarea {
            width: 200px;
            height: 200px;
        }

        div {
            width: 250px;
            display: inline-block;
        }

        .normal {
            border-right: solid 1px;
        }

        .normal small {
            color: #6da9a2;
        }

        .abnormal {
            position: absolute;
            margin-left: 40px;
        }

        #textArea {
            position: absolute;
        }

        .abnormal div {
            color: darkgrey;
            position: absolute;
        }
    </style>
<h2>textarea添加帮助文字</h2>
<hr/>
<div class="normal">
    <p><b>普通显示方式</b></p>
    <textarea></textarea><br/>
    <!--代码此处千万不要强迫症发作——按回车键！！！不然就会在文本框内自动保留空格-->

    <small>*在此输入备注信息</small>
</div>

<div class="abnormal">
    <p><b>类似placeholder的显示方式</b></p>
    <textarea id="textArea" onfocus="document.getElementById('introTxt').style.display='none'"
              onblur="if(value=='')document.getElementById('introTxt').style.display='inline'"></textarea>
    <!--代码此处千万不要强迫症发作——按回车键！！！不然就会在文本框内自动保留空格-->
    <div id="introTxt" onclick="focusTextarea()">在此输入备注信息</div>

</div>

<script>
    /*这个函数是为了保证浏览者点击introTextarea这层div时，使焦点自动移动到textarea*/
    function focusTextarea() {
        document.getElementById('introTxt').style.display = 'none';
        var temp = document.getElementById('textArea');
        temp.focus();
    }
</script>

页面效果

重点来了！！！

可以这么说，我上面写的你就当做没看见吧！

因为

看到没，我的亲！

<textarea>新增属性里面已经添加了placeholder属性，也就是说，我上面写了那么多，人家一句代码搞定！

实现代码

<textarea placeholder="这是帮助文字">
</textarea>

网页效果