输入框

    输入 - 图1

    更新时间:2023-04-14 15:04:07
    文档 属性·动作·事件
    常见功能
    输入框组件可供用户通过键盘输入或粘贴的方式自主输入内容,从而直接与用户进行数据交互和数据收集。
    输入框同文本对象类似,允许自主定义输入框外观,设定文字样式并进行排版,还允许定义提示文字。
    使用场景
    输入框组件可便捷地实现用户数据收集或输出信息供校对,是一种用途广泛的组件。常见于以下场景:
    1、登录页面-使用户键入信息以进行数据匹配
    输入 - 图2
    2、 报名、**注册**-对用户信息进行收集
    输入 - 图3
    3、用户**自定义**内容-进行数据交互
    输入 - 图4
    基本用法
    1、 设定输入框为密码输入框
    输入框的密码输入属性默认关闭,可手动开启。开启后变为密码输入框,所有输入内容将被密文替代:
    输入 - 图5
    该属性也可在非编辑状态下动态设定。此处添加一个复选框(关于复选框的使用详见复选框),令其设定输入框的属性是否为密码输入框
    输入 - 图6
    进行预览,效果如下:
    输入 - 图7
    2、 输入框的聚焦状态及设定
    当用户点击输入框即自动聚焦,调用系统键盘,开始输入。用户输入完成后,点击回车键或点击输入框以外的任意位置,输入框自动失焦
    除了点击聚焦以外,还可通过事件控制输入框自动聚焦,例如当我们完成输入框1的键入时,希望自动聚焦输入框2,以便利用户操作,可采用如下事件:
    输入 - 图8
    3、输入框的条件判断
    输入框自带的触发条件可对输入框内容进行条件判断,用于检验输入框是否为空,内容长度、内容类型是否满足特定条件,还可用于查询是否包含某字符串等。
    例如,当输入框失焦时自动判断是否为,如果为空则弹出弹窗提示“请正确输入内容”。运算符设定为“类型为”,点击右侧判断条件下拉菜单,可自动加载若干种数据类型:
    输入 - 图9
    此处选择“空”。
    此外还可以判断数据长度是否达到某值, 例如系统要求输入六位密码,如果不满足 则弹窗提示:
    输入 - 图10
    Q&A