当前位置:   article > 正文

contenteditable属性让div也可以当做输入框

div的content属性为输入框name

你知道div也可以当做输入框么?

H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度),但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢?

输入框语法

<element contenteditable="true|false">
  1. <div class='input' contenteditable placeholder='请输入文字'></div>
  2. /**css样式*/
  3. .input{
  4. width:200px;
  5. height:24px;
  6. line-height:24px;
  7. font-size:14px;
  8. padding:5px 8px;
  9. border:1px solid #ddd;
  10. }
  11. .input:empty::before {
  12. content: attr(placeholder);
  13. }

1084318-20190605154103531-728511700.png

这么写不是很完善,因为在聚焦的时候,placeholder中的内容不消失

可以写一个方法,模拟placeholder

因为只有input、textarea才能使用 ele.val(),所以这里使用 ele.text() 取值;当然这种方法可以在input处理兼容模拟
placeholder中使用。

  1. <div class='input' contenteditable></div>
  2. function checkValue(obj,tipText){
  3. $(obj).focus(function(){
  4. if( obj.text()== tipText ){
  5. obj.text("");
  6. }
  7. });
  8. $(obj).blur(function(){
  9. if( obj.text()=="" ){
  10. obj.text(tipText);
  11. }
  12. });
  13. if( $.trim( obj.text() )=="" ){
  14. obj.text(tipText);
  15. }
  16. }
  17. checkValue($(".input"),'请输入文字');

原文作者:Katherine_Lisa

转载于:https://www.cnblogs.com/lisaShare/p/10980003.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/218699
推荐阅读
相关标签
  

闽ICP备14008679号