欢迎访问成都祈钰瑶科技有限公司！

全国免费服务热线：

18982081108
✕

成都网站设计公司,成都响应式网站设计,成都移动端网站设计,成都网站UI设计

成都祈钰瑶 >> 网站建设知识

创新互联百度小程序教程：input 输入框

  • input 输入框
    • 属性说明
      • type 有效值
      • confirm-type 有效值
    • 示例
      • 代码示例 1：基础用法
      • 代码示例 2：自定义输入控制
      • 代码示例 3：自定义输入内容
      • 代码示例 4：自定义占位符颜色
      • 代码示例 5：实时获取输入值
    • Bug & Tip

    input 输入框

    解释：输入框。v3.105.0 起支持同层渲染。
    Web 态说明：在 Web 态中，受浏览器限制，部分浏览器不支持自动获取焦点。如：safari 浏览器、chrome 浏览器；受设备系统或输入法限制，confirm-type 值无法修改键盘右下角按钮文字，右下角按钮内容由设备系统或输入法决定。

    属性说明

    value

    String

    否

    输入框的初始内容。若要动态设置输入框内容，需设置value=”{= value =}”（注：若要取键盘输入后的 value 请通过 bindinput 获取）

    type

    String

    text

    否

    input 的类型

    password

    Boolean

    false

    否

    是否是密码类型

    placeholder

    String

    否

    输入框为空时占位符。其样式暂时只支持设置 font-size、font-weight、color

    placeholder-style

    String

    否

    placeholder 的样式

    placeholder-class

    String

    input-placeholder

    否

    placeholder 的样式类

    disabled

    Boolean

    false

    否

    是否禁用

    maxlength

    Number

    140

    否

    最大输入长度，设置为 -1 的时候不限制最大长度

    cursor-spacing

    Number

    0

    否

    指定光标与键盘的距离（单位：px）。当键盘弹出时， 如果需要页面上滑才能完整显示 input 组件, 那么此时光标与键盘的距离为设定的 cursor-spacing 值； 如果 input 组件处于屏幕上方，键盘弹出时不会挡住 input， 则忽略该属性

    受限于设备系统，暂不支持

    focus

    Boolean

    false

    否

    获取焦点，调起键盘
    开发者工具暂不支持自动获取焦点

    部分浏览器下不支持自动获取焦点

    confirm-type

    String

    done

    否

    设置键盘右下角按钮的文字。其最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持

    暂不支持

    confirm-hold

    Boolean

    false

    否

    点击键盘右下角按钮时是否保持键盘不收起

    cursor

    Number

    否

    指定 focus 时的光标位置，自动聚焦时才会生效
    开发者工具暂不支持

    selection-start

    Number

    -1

    否

    光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用

    selection-end

    Number

    -1

    否

    光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用

    adjust-position

    Boolean

    true

    否

    键盘弹起时，是否自动上推页面

    受限于设备系统，暂不支持

    bindinput

    EventHandle

    否

    当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值。暂不支持处理函数直接 return 一个字符串

    bindfocus

    EventHandle

    否

    输入框聚焦时触发，event.detail = {value: value, height: height}，height 为键盘高度

    bindblur

    EventHandle

    否

    输入框失去焦点时触发，event.detail = {value: value}

    bindconfirm

    EventHandle

    否

    点击完成按钮时触发，event.detail = {value: value}

    属性名类型默认值必填说明Web 态说明
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    type 有效值

    text

    文本输入键盘

    number

    数字输入键盘

    idcard

    身份证输入键盘

    受设备系统或输入法限制，一些设备（如，带原生输入法的 iOS 设备）不支持

    digit

    带小数点的数字键盘

    受设备系统或输入法限制，一些设备（如，带原生输入法的 iOS 设备）不支持

    值说明Web 态说明
    -
    -

    confirm-type 有效值

    send

    键盘右下角按钮为“发送”

    search

    键盘右下角按钮为“搜索”

    next

    键盘右下角按钮为“下一个”

    go

    键盘右下角按钮为“前往”

    done

    键盘右下角按钮为“完成”

    值说明

    请根据需要录入的内容类型合理设置 input 组件的 type 值，降低用户操作成本，提升用户录入体验

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：基础用法

    • SWAN
    • CSS
     
 
 
        
  
  
    1. <view class="wrap">
      2.   
  
  
    2.  <view class="card-area">
      3.   
  
  
    3.  <view class="top-description border-bottom">基础用法</view>
      4.   
  
  
    4.  <input class="normalInput" placeholder="请在此输入标题" />
      5.   
  
  
    5.  </view>
      6.   
  
  
    6. </view>
      7.

    代码示例 2：自定义输入控制

    • SWAN
    • JS
     
 
 
        
  
  
    1. <view class="wrap">
      2.   
  
  
    2.  <view class="card-area">
      3.   
  
  
    3.  <view class="top-description border-bottom">自定义输入控制</view>
      4.   
  
  
    4.  <view class="list-area border-bottom">
      5.   
  
  
    5.  <view class="list-item-key-4">自动聚焦</view>
      6.   
  
  
    6.  <view class="list-item-value">
      7.   
  
  
    7.  <input
      8.   
  
  
    8.  placeholder='focus="true"'
      9.   
  
  
    9.  selection-start="3"
      10.   
  
  
    10.  selection-end="7"
      11.   
  
  
    11.  focus="{{true}}"
      12.   
  
  
    12.  confirm-hold="false"
      13.   
  
  
    13.  confirm-type="send"
      14.   
  
  
    14.  bindfocus="bindKeyfocus" />
      15.   
  
  
    15.  </view>
      16.   
  
  
    16.  </view>
      17.   
  
  
      18.   
  
  
    18.  <view class="list-area border-bottom">
      19.   
  
  
    19.  <view class="list-item-key-4">控制长度</view>
      20.   
  
  
    20.  <view class="list-item-value">
      21.   
  
  
    21.  <input
      22.   
  
  
    22.  cursor="100"
      23.   
  
  
    23.  bindblur="bindKeyblur"
      24.   
  
  
    24.  bindconfirm="bindKeyconfirm"
      25.   
  
  
    25.  placeholder='maxlength="10"'
      26.   
  
  
    26.  maxlength="10" />
      27.   
  
  
    27.  </view>
      28.   
  
  
    28.  </view>
      29.   
  
  
      30.   
  
  
    30.  <view class="list-area border-bottom">
      31.   
  
  
    31.  <view class="list-item-key-4">禁用</view>
      32.   
  
  
    32.  <view class="list-item-value">
      33.   
  
  
    33.  <input disabled="true" placeholder='disabled="true"' />
      34.   
  
  
    34.  </view>
      35.   
  
  
    35.  </view>
      36.   
  
  
      37.   
  
  
    37.  <view class="list-area">
      38.   
  
  
    38.  <view class="list-item-key-4">带有内容</view>
      39.   
  
  
    39.  <view class="list-item-value">
      40.   
  
  
    40.  <input value='value="{= value =}"' />
      41.   
  
  
    41.  </view>
      42.   
  
  
    42.  </view>
      43.   
  
  
    43.  </view>
      44.   
  
  
    44. </view>
      45.

    代码示例 3：自定义输入内容

    • SWAN
    • JS
     
 
 
        
  
  
    1. <view class="wrap">
      2.   
  
  
    2.  <view class="card-area">
      3.   
  
  
    3.  <view class="top-description border-bottom">自定义输入内容</view>
      4.   
  
  
    4.  <view class="list-area border-bottom">
      5.   
  
  
    5.  <view class="list-item-key-4">文本</view>
      6.   
  
  
    6.  <view class="list-item-value">
      7.   
  
  
    7.  <input
      8.   
  
  
    8.  type="text"
      9.   
  
  
    9.  placeholder='type="text"'
      10.   
  
  
    10.  bindinput="{{!isWeb ? '': 'keyBoardText'}}"
      11.   
  
  
    11.  value="{= textValue =}" />
      12.   
  
  
    12.  </view>
      13.   
  
  
    13.  </view>
      14.   
  
  
      15.   
  
  
    15.  <view class="list-area border-bottom">
      16.   
  
  
    16.  <view class="list-item-key-4">数字</view>
      17.   
  
  
    17.  <view class="list-item-value">
      18.   
  
  
    18.  <input
      19.   
  
  
    19.  type="number"
      20.   
  
  
    20.  placeholder='type="number"'
      21.   
  
  
    21.  bindinput="{{!isWeb ? '': 'keyBoardNumber'}}"
      22.   
  
  
    22.  value="{= numberValue =}" />
      23.   
  
  
    23.  </view>
      24.   
  
  
    24.  </view>
      25.   
  
  
      26.   
  
  
    26.  <view class="list-area border-bottom">
      27.   
  
  
    27.  <view class="list-item-key-4">身份证</view>
      28.   
  
  
    28.  <view class="list-item-value">
      29.   
  
  
    29.  <input
      30.   
  
  
    30.  type="idcard"
      31.   
  
  
    31.  adjust-position="true"
      32.   
  
  
    32.  placeholder='type="idcard"'
      33.   
  
  
    33.  bindinput="{{!isWeb ? '': 'keyBoardCard'}}"
      34.   
  
  
    34.  value="{= cardValue =}" />
      35.   
  
  
    35.  </view>
      36.   
  
  
    36.  </view>
      37.   
  
  
      38.   
  
  
    38.  <view class="list-area">
      39.   
  
  
    39.  <view class="list-item-key-4">小数</view>
      40.   
  
  
    40.  <view class="list-item-value">
      41.   
  
  
    41.  <input
      42.   
  
  
    42.  type="digit"
      43.   
  
  
    43.  placeholder='type="digit"'
      44.   
  
  
    44.  bindinput="{{!isWeb ? '': 'keyBoardDigit'}}"
      45.   
  
  
    45.  value="{= digitValue =}" />
      46.   
  
  
    46.  </view>
      47.   
  
  
    47.  </view>
      48.   
  
  
    48.  </view>
      49.   
  
  
    49. </view>
      50.

    设计指南

    错误使用 input 组件的 type 值，会额外增加用户操作成本，影响输入转化。

    错误

    输入身份证信息时调起默认文本键盘，用户需要切换至数字键盘输入，再切换至字母键盘输入英文字母，共进行 3 次键盘切换才能顺利完成身份证信息输入。

    代码示例 4：自定义占位符颜色

    • SWAN
     
 
 
        
  
  
    1. <view class="wrap">
      2.   
  
  
    2.  <view class="card-area">
      3.   
  
  
    3.  <view class="top-description border-bottom">
      4.   
  
  
    4.  <view>自定义占位符颜色</view>
      5.   
  
  
    5.  <view>
      6.   
  
  
    6.  placeholder-style=
      7.   
  
  
    7.  color:"#3388FF"
      8.   
  
  
    8.  </view>
      9.   
  
  
    9.  </view>
      10.   
  
  
    10.  <input
      11.   
  
  
    11.  class="normalInput"
      12.   
  
  
    12.  placeholder-class="placeholder"
      13.   
  
  
    13.  placeholder-style="color:#3388FF"
      14.   
  
  
    14.  placeholder="请在此输入" />
      15.   
  
  
    15.  </view>
      16.   
  
  
    16. </view>
      17.

    代码示例 5：实时获取输入值

    • SWAN
    • JS
     
 
 
        
  
  
    1. <view class="wrap">
      2.   
  
  
    2.  <view class="card-area">
      3.   
  
  
    3.  <view class="top-description">
      4.   
  
  
    4.  <view>实时获取输入值</view>
      5.   
  
  
    5.  <view>bindinput="bindKeyInput"</view>
      6.   
  
  
    6.  </view>
      7.   
  
  
    7.  <view class="textarea">{{inputValue}}</view>
      8.   
  
  
    8.  <input class="normalInput" bindinput="bindKeyInput" placeholder="请在此输入内容" />
      9.   
  
  
    9.  </view>
      10.   
  
  
    10. </view>
      11.

    Bug & Tip

    • Tip：input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family 。
    • Tip：在 input 聚焦期间，避免使用 CSS 动画。
    • Bug：在 iOS 端键盘弹起时会出现组件 bindtap 不生效的问题（部分场景，如：IM 聊天场景中的固定在页面底部的文本框与发送按钮），建议先使用 bindtouchstart 代替 bindtap。
    上一篇：手把手教你DIY制作精简版Centos系统
    下一篇：快速入门：将ON对象存入数据库 (如何把json对象写入数据库中)
    友情链接 : 成都响应式网站设计　成都网站UI设计　聊聊微前端那些事儿　为什么k4打不开了呢　php如何设置字符集　网站做好后，网站优化应该如何进行？　刚刚注册的域名未通过注册局审核