首页 > 代码库 > <textarea>输入框提示文字

<textarea>输入框提示文字

背景

看了过时的资料,花费大把时间,不过也有收获,还是写写吧!

分析

有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题——因为<textarea>设置了默认内容,如果用户不点击输入框(更改输入框的文本),而直接提交,就把默认的提示内容提交到后台了。

参考其他同学的解决方案:创建一个div,这个div包含了帮助文字、<textarea>,并通过css的position属性来控制,将帮助文字显示到<textarea>中,点击<textarea>(或提交)时,隐藏到帮助文字,这样即使用户不点击输入框直接提交,也不会把默认的提示文字提交到后台(因为帮助文字本身就与textarea不属于同一个层)。

示例

实现代码

<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=http://www.mamicode.com/=‘‘)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>

网页效果

技术分享


知识要更新!

<textarea>输入框提示文字