你知道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中的内容不消失
可以写一个方法,模拟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"),'请输入文字');