zoukankan      html  css  js  c++  java
  • <div>标签仿<textarea>。contentEditable=‘true’,赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框。1、该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2、文本框输入状态下其高度会随文本内容自动撑开。

    方案选择:1、使用<textarea>标签。但是标签高度不会随文本高度自动撑开,而是出现滚动条。使用JS动态计算文本内容高度赋予<textarea>标签高度。

         2、使用<div>或者<p>、<span>等非表单标签,通过赋予其contentEditable='true'属性,是其获得内容可以编辑的功能,从而使标签高度随着文本内容高度自动撑开。

    遇到的问题:方案一遇到的问题此文不做讨论。

    使用contentEditable属性虽然满足的需求2,但是无法满足需求1。

    1 <div contentEditable='true'></div>

    解决方案:使用:before伪元素达到仿‘placeholder’的效果。

    使用css3的attr()函数。获取div标签中的‘placeholder’或者其他自定义属性'data-*'的值,赋予:before伪元素展示即可。

    当文本输入的时候,使用JS替换div标签的classname,使其没有:before伪元素,当输入框没有值得时候再替换classname,重新赋予:before伪元素,即可达到input等表单标签的placeholder效果。

     1 <div class='d' contentEditable='true' placeholder='请输入您的建议'></div> 
     2 .d:before {
     3          //有:before
     4          content: attr(placeholder);
     5          display: block;
     6          color: #adadad;
     7 }
     8  
     9 <div class='a' contentEditable='true' placeholder='请输入您的建议'></div>
    10 .a{
    11       // 无:before  
    12 }

    遇到的问题:仿‘placeholder’在safari的表现不同。当用输入框内输入值后,在删除输入框,safari无法用DOM.innerText或者DOM.innerHTML的length来做判断,因为删除完后,在输入框中有一个空换行符。具体原理本人不是很懂。

    解决方案:在length的判断基础上再额外加判断条件

    1 var val=DOM.innerHTML;
    2 
    3 val.length > 0 && val != '<br>' && val != '<br/>';
    4 
    5 
    6 var val2=DOM.innerText;
    7 
    8 val2.length > 0 && val2 != '<br>' && val2 != '<br/>'

    如果你不需要用到上面的方法可以使用DOM.textContent。safari和chrome表现相同,具体场景使用具体的API来操作。

    至于三者的区别,笔直理解不透彻,就不描述了。

    以上是纯属个人开发中遇到的问题和理解,如有错误,请谅解。

  • 相关阅读:
    JSMpeg的使用
    Python模拟键盘输入
    Python处理文件打开窗口
    Airtest网页自动化批量执行脚本
    使用AirTest进行网页自动化测试
    iOS14适配
    Vue ref refs
    uni-app 离线打包后提示 打包时未添加Native UI、File模块
    uni-app 自定义弹窗组件、slot插槽
    Taro react事件传参 路由传参
  • 原文地址:https://www.cnblogs.com/ygjoe/p/7527275.html
Copyright © 2011-2022 走看看