输入框

1 引言 在我们使用HbuilderX开发APP时，经常会有一个很实用的功能需要开发，那就是搜索功能了，uni-app为我们提供该功能，大大的简化了开发难度，只要进行简单的配置就可以生成原生的导航输入框了（笔者的另一篇笔记中记录了配置过程，这里就不重复介绍了），那么现在有了原生输入框了，我们要如何操作输入框中的内容呢，原生输入框可不像input组件那样可以直接绑定数据的，下面笔者记录一下操作原生输入框的内容（比如输入框的聚焦失焦、输入内容的获取） 2 导航栏事件监听 2.1 页面生命周期： https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f 在uni-app页面周期有这么的三个函数： onNavigationBarSearchInputChanged ：监听原生标题栏搜索输入框输入内容变化事件 onNavigationBarSearchInputConfirmed ：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 onNavigationBarSearchInputClicked ：监听原生标题栏搜索输入框点击事件 2.2 获取输入框内容 要获取输入框内容，可以在生命周期里通过参数e

1、操作测试对象 前面讲到了不少知识都是定位元素，定位只是第一步，定位之后需要对这个元素进 行操作。鼠标点击或者键盘输入，这要取决于我们定位的是按钮还输入框。 一般来说，webdriver 中比较常用的操作对象的方法有下面几个 click 点击对象 send_keys 在对象上模拟按键输入 clear 清除对象的内容，如果可以的话 submit 清除对象的内容，如果可以的话 text 用于获取元素的文本信息 1.1 、鼠标点击与键盘输入 在我们本系列开篇的第一个例子里就用到了到 click 和 send_skys ， coding=utf-8 from selenium import webdriver import time driver = webdriver.Firefox() driver.get("http://www.baidu.com") driver.find_element_by_id("kw").clear() driver.find_element_by_id("kw").send_keys("selenium") time.sleep(2) #通过 submit() 来操作 driver.find_element_by_id("su").submit() time.sleep(3) driver.quit() send_keys("xx")

表单标签 作用：用于收集用户信息，让用户填写、选择相关信息 格式： <from> 表单标签 </from> 注意事项： 所有的表单内容，都要写在form标签里面 form标签中有两个比较重要的属性 action 和 method ，但就现目前的知识储备而言暂时无法理解，所以放到后面的课程中讲解 input标签 如果说 td 是表格最核心的标签，那么 input 就是表单最核心的标签。input 标签有一个 type 属性，这个属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观不同 明文输入框 作用：用户可以在输入框内输入内容 账号：<input type="text"/> 暗文输入框 作用：用户可以在输入框内输入内容 密码：<input type="password"/> 给输入框设置默认值 账号：<input type="text" value="123"/> 密码：<input type="password" value="123"/> 规定输入字段中的字符的最大长度 账号：<input type="text" name="fullname" maxlength="8" /> 单选框（radio） 作用：用户只能从众多选项中选择其中一个 单选按钮，天生是不互斥的，如果想互斥，必须要有 相同的name属性 <input type="radio" name=

1.<form> 标签 网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 语法： <form method="传送方式" action="服务器文件"> 讲解： 1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ： 数据传送的方式（get/post）。 <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form> 注意:所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上） 2.文本输入框、密码输入框 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。语法： <form> <input type=

使用表单标签，与用户交互 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 语法： <form method="传送方式" action="服务器文件"> 讲解： 1. <form> ： <form>标签是成对出现的，以<form>开始，以</form>结束。 2. action ： 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3. method ： 数据传送的方式（get/post）。 <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form> 注意: 1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。 2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。 文本输入框、密码输入框 当用户要在表单中键入字母

新增的input输入类型 HTML5中增加了表单方面的诸多功能，包括增加input输入类型、表单元素、form属性和input属性等。 新的input输入类型 email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值，如果不是一个有效的E-mail地址，该输入框不允许提交该表单。 <input type="email" name="user_email"> url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。 <input type="url" name="user_url"> number类型的input元素提供用于输入数值的文本框，可以设定所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。 <input type="number" name="number1"min="1" max="20" step="4"> max:规定允许的最大值 min：规定允许的最小值 step：规定合法的数字间隔（例如step="4",合法数字是-4、0、4、8等） value：规定默认值 range类型的input元素提供用于输入包含一定范围内数字值的文本框

样式： input{ 　　font-size:1.4em; 设置输入框中字体的大小 　　height:2.7em; 设置输入框的高度 　　border-radius:10px; 设置输入框的圆角的大小 　　border:1px solid #c8cccf;设置输入框边框的粗细和颜色 　　color:#986655; 设置输入框中文字的颜色 　　outline:0; 将输入框点击的时候出现的边框去掉 　　text-align:center; 设置输入框中文字的位置 　　display:block; 将输入框设置为块级元素 } type属性： 　　text 　　 定义单行的输入字段，用户可在其中输入文本 　　password 定义密码字段。该字段中的字符被掩码 　　file 　　　 定义输入字段和 "浏览"按钮，供文件上传 　　radio　　 定义单选按钮 　　checkbox 定义复选框 　　hidden 　 定义隐藏的输入字段 　　button 　　定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） 　　image 　　定义图像形式的提交按钮 　　reset 　　 定义重置按钮。重置按钮会清除表单中的所有数据 　　submit 　 定义提交按钮。提交按钮会把表单数据发送到服务器 　　color 　　　　　定义调色板 　　tel　　　　 　　定义包含电话号码的输入域

oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。 oninput 事件在主流浏览器的兼容情况如下： 　　 　　从上面表格可以看出， oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况： 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。 修改了 select 元素的选中项，selectedIndex 属性发生变化。 　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。 　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head>

这三个都是操作input输入框的值 lazy修饰符 （失去焦点或者回车时才同步数据） v-model默认是在input事件中同步输入框的数据的，也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变，lazy修饰符可以让数据失去焦点或者回车时才会更新 number修饰符 （input值统一处理为数字） 在输入框中，无论我们输入的是数字还是字母，都会被当做字符串类型进行处理， 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理 trim修饰符 （去除input值两边空格） 如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤内容左右两边的空格 来源： 51CTO 作者： 喝醉的熊 链接： https://blog.51cto.com/13550695/2463601

在项目中遇到的一个问题，用的是一个地址选择插件，当点击input输入框时底部会弹出地址供选择。但是出现了一个小小的问题，在ios端会出现底部红框标出的输入框，虽然说不影响使用吧，但是在视觉效果上不是很好。（安卓端没有出现这个问题），在解决这个问题的过程也踩了不少的坑，一开始觉得把input的readonly设置为readonly就能解决问题，现实是并没有任何变化只是不能手动输入值底部的弹框依然存在。然后我就在想弹框是在我点击input输入框时出现的，那能不能够当input获取焦点时执行方法把弹框隐藏掉。在慢慢分析中就想到在获取焦点的时候执行失去焦点事件这样弹框就没法弹出了，自然而然就想到了onfocus事件和blur事件，写了一句“onfocus="this.blur()”果然ios端底部弹框的问题就解决了。我又投身于改下一个bug中了。 代码： <div class="content-block"> <input id="demo1" type="text" readonly="readonly" placeholder="城市选择特效" value="广东省,深圳市,南山区" onfocus="this.blur()"> <input id="value1" type="hidden" value="20,234,504"> </div> 来源： https://www