怎么实现textarea输入指定字符弹出提示框
2个回答
2018-11-23 · 百度知道合伙人官方认证企业
关注
展开全部
<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 {
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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这个看你用什么处理了,通常h5是可以处理的,但是使用js更好,建议学习一下js
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询