你知道div也可以当做输入框么?
H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度),但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢?
输入框语法
<element contenteditable="true|false">
<div class='input' contenteditable placeholder='请输入文字'></div> /**css样式*/ .input{ width:200px; height:24px; line-height:24px; font-size:14px; padding:5px 8px; border:1px solid #ddd; } .input:empty::before { content: attr(placeholder); }
这么写不是很完善,因为在聚焦的时候,placeholder中的内容不消失
因为只有input、textarea才能使用 ele.val(),所以这里使用 ele.text() 取值;当然这种方法可以在input处理兼容模拟
placeholder中使用。
<div class='input' contenteditable></div> function checkValue(obj,tipText){ $(obj).focus(function(){ if( obj.text()== tipText ){ obj.text(""); } }); $(obj).blur(function(){ if( obj.text()=="" ){ obj.text(tipText); } }); if( $.trim( obj.text() )=="" ){ obj.text(tipText); } } checkValue($(".input"),'请输入文字');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。