前言

在说这个之前，想必大家应该都比较了解搜索引擎了，它就是通过用户在浏览器输入框中输入文本，从而显示一些结果，你觉得哪项符合你要搜索的内容，你就点击哪项。

【一、项目准备】

浏览器：360浏览器

<input name="fee" type="text"  onkeyup="validates(this)">
<script type="text/javascript">
function validate(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."
    obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是
    obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
    obj.value = obj.value.replace(".", "$##34;).replace(/\./g, "").replace("$##34;, ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两位小数
 
}
</script>

【组件功能】：填写网页中输入框内容

配置预览

配置说明

目标元素支持T或#

通过自动捕获工具捕获(选择元素工具使用方法)或手动填写网页元素的css,xpath，指定对应网页元素作为操作目标

今天给大家带来的是伸缩的输入框的动画。大家可以看到，点击之后包括用户名往上推，输入框进行升高。其实这个在很多地方也可以用到，在实际项目中。长话短说，看代码区域。

我用开发工具是hpdx开发uni app的，大家应该很熟悉了。vivo式组容器，可以看到里面包含了第二层vivo式组容器、important输入框组件、文本组件，还有一条线。我用i来定义，就是这条线。这里面的有基础同学可以知道，如果是真的时候是一个样式，如果是假的时候另一个样式互相切换的。