zoukankan      html  css  js  c++  java
  • 定制高度随输入内容变化的输入框

    需求:定制高度随输入内容变化的输入框;没有内容时单行高度36px,内容少于4行时随输入内容的增加或者减少变换输入框的高度,大于4行后高度不变,内容上下滚动;

    难点:没有内容时的高度和内容文字减少时行高变小;

    交互

    解决方案:hostInput作为高度随输入内容变化的输入框,新建一个shadowbox,高度为0,宽度等于hostInput的宽度,超出隐藏,在shadowbox里放一个shadowInput的块,块的文字内容和输入框的文字内容和样式都一致,然后取shadowInput的高度作为hostInput的高度进行计算。

    HTML:

    CSS:

    JS:

    =============================分割线==========================================

    使用contenteditable属性:<div contenteditable="true"></div>

    可能的问题:ios中无法输入

    原因:使用了fastclick.js库,导致这个可编辑的div被点击无法轻松的唤起输入法,点击数次才能成功一次。

    解决方案

     i:  添加样式-webkit-user-select:text

     ii:

      (1)给div加上needsclick的class: <div contenteditable="true" class="needsclick"></div>

      (2)或者修改fastclick的源码:

                 

  • 相关阅读:
    LLDB 常用的调试命令
    iOS https认证
    pod lib lint xxx.podspec 验证出错 Could not find a `ios` simulator
    LLDB 调试
    First throw call stack: 不打印方法名
    AOP
    增强现实
    2017
    iOS的主要框架介绍 (转载)
    iOS中都有什么设计模式?各个设计模式的作用 (转载)
  • 原文地址:https://www.cnblogs.com/vicky24k/p/11464909.html
Copyright © 2011-2022 走看看