web移动端input标签

一、微信小程序input

input官方文档

1. type属性

由于微信小程序用户隐私保护 新增了nickname类型

支持number,idcard,safe-password(仅Webview),nickname...

2. value属性

可以通过setData动态设置value值，官网文档说明：输入框的初始内容

3. focus

自动聚焦，键盘弹起

4. adjust-position

如果input父容器为绝对或者固定定位，该属性设置失效

• 默认true，键盘弹起时，是否自动上推页面
• 解决问题：软键盘遮挡输入框

5. cursor-spacing属性

只能写死固定数字

• 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
• 解决问题：软键盘遮挡输入框

6. confirm-type属性

• 设置键盘右下角按钮的文字，仅在type='text'时生效
• 解决问题：软键盘按钮文字可以由业务方决定

7. always-embed属性

• 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
• 解决问题
  • 解决 input键盘弹出时，滚动页面，输入框内容错位问题
  • 解决 在popup中(底部固定定位)，placeholder文字错位问题

二、h5 input

1. autoFocus

自动聚焦

2. enterKeyHint

类似小程序输入控件confirm-type属性，见文档

三、实例

• 直播设计交互：页面最底部有输入框，购物车icon，更多操作按钮 放一行，类似抖音直播页面最底部设计图稿，点击输入框，软键盘弹起，软键盘上方是输入框
• 代码实现

  • 底部输入框做一个假的input样式，作为一个trigger触发器，点击弹起真正的input弹窗

  • 小程序实现

    <!-- uniapp语法 -->
    <input
      :cursor-spacing="0"
      :adjust-position="false"
      :focus="true"
      confirm-type="send"
    />
    

  • h5实现

    <!-- react语法 -->
    <!-- label作为触发器，点击显示input，这里必须利用htmlFor属性，否则input的autoFocus属性将不起作用 -->
    <label htmlFor="message-input">
      <span>{"说点什么吧"}</span>
    </label>
    

    <!-- react语法 -->
    <input
      id="message-input"
      autoFocus={true}
      enterKeyHint="send"
    />