输入框

熟悉web前端开发的人都知道，判断复选框是否选中是经常做的事情，判断的方法很多，但是开发过程中常常忽略了这些方法的兼容性，而是实现效果就好了。博主之前用户不少方法，经常Google到一些这个不好那个不好的文章，到后面自己都混乱了。今天偶然看到一篇外国的博客，觉得讲解的很不错，打算翻译成中文，并加上了一些自己的见解。翻译的目的一是分享给大家，二是方便自己查阅。原文链接是： http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html 。、 　　如果你从事web开发并且在你开发的网页中有复选框，你可能需要判断当前该复选框是否选中，进而执行一些条件语句。有很多种方法来判断一个复选框是否选中。 　　让我们先来看看原生的javascript是怎么判断这个属性的。在javascript中，在你选中了某个元素之后，你可以轻易地通过该元素的 checked 属性来判断你选中的复选框是否选中了。 　　我们来看一个例子，在你的页面上面有一个复选框并且该复选框有着唯一的id，比如 myCheckBox ，如下面所示： 1 <input type="checkbox" id="myCheckBox"/> 　　现在我们首先通过javascript来选中这个元素然后获取它的 checked 属性。 1 function

表单是网页中最常见的元素，也是用户和我们交互的重要手段，在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签，即输入框、下拉框、按钮、文本域。 表单结构： <form action="" method="POST" enctype="multipart/form-data"> 用户名：<input type="text" name="username"/ <input type="submit" name="提交按钮"/> </form> 如上是一个最简单的表单结果，在表单结构中需要我们掌握的内容除了表单相关的标签外，就是表单的属性。action 属性，指向服务器处理表单的程序地址，而method属性指定浏览器处理表单的方式，常用的方法包括GET、POST，如下是我们总结的一些关于这两种方式的区别： GET，这种方法在表单提交的时候比较快，但是表单中的数据会显示在浏览器的地址栏中，所以这种方式不太安全。 POST，这种方法在提交表单的时候会对表单内容进行封装，不会显示在地址栏中，所以这种方式比较安全，不过在速度上不如GET方式。 表单的中输入框内容，输入框依赖的是<input>标签，不同的输入框实现是通过它的type属性实现的，关于type属性的值包括可用的选项包括 text（普通文本输入）、password（密码框） 、checkbox

安装 Sublime Text 3 下载地址： http://www.sublimetext.com/3 我此时使用的是 Build 3083 版本。 安装 Package Control 这个是精华所在，以后用到的插件都要借助这个工具来安装。打开已经安装好的 Sublime Text 3，然后点击顶部菜单的 View -> Show Console （或者使用快捷键 command + ~ ）。 在弹出的输入框里复制粘贴下面的代码： import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh

1.概念：表单是用于采集用户输入的数据的 使用的标签：form form用于定义表单。可以定一个范围，范围代表采集用户数据的范围。 属性： 　　1.action：提交数据的URL 　　2.method：指定提交方式 　　　　 get：1.请求参数会在地址栏中显示，会封装到请求行中 　　　　　　 2.请求参数长度是有限制的 　　　　　　 3.不太安全 　　　　post：1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议中讲） 　　　　　　　2.请求参数的长度是没有限制的 　　　　　　　3.较为安全 表单项的数据要写被提交，必须指定其name属性 2.表单项标签 1.input：可以通过type属性值，来改变元素的样式 　　1.type = “ * ”： 　　　　*.text：文本输入框，默认值 　　　　　　placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。 　　　　*.password：密码输入框 　　　　*.radio：单选框 　　　　　　注：1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样； 　　　　　　　　 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值； 　　　　　　　　 3.checked属性，可以指定默认值。 　　　　*.checkbox：复选框 　　　　　　注： 1

一、普通输入框 input <div class="layui-form-item"> <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label> <div class="layui-input-block width_250 pos-r"> <input type="text" class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" autocomplete="off"> <i class="icon_ca_layui"></i> </div> </div> 二、自动完成式输入框 确保 layui 引入了 autoComplete 插件。 确保初始化代码运行于 layui.use 的回调函数里。 引入 baseUtility.js。 HTML @* 备案网点 *@ <div class="layui-input-block" style="margin-top:5px; margin-left:320px;"> <label class="layui-form-label">备案网点</label> <div class="layui-input-inline">

4.2 控制浏览器 WebDriver 主要提供操作页面上各种元素的方法 ，同时 ，它还提供了操作浏览器的一些方法 ，如控制浏览器窗口大小 、操作浏览器前进或后退等 。 4.2.1 控制浏览器窗口大小 有时候我们希望浏览器能在某种尺寸下运行。例如，可以将 Web 浏览器窗口设置成移动端大小（480x800），然后访问移动站点。WebDriver 提供的 set_window_size（）方法可以用来设置浏览器窗口大小。 更多情况下，我们希望 Web 浏览器在全屏幕模式下运行，以便显示更多的元素，可以使用 maximize_window()方法实现，该方法不需要参数。 4.2.2 控制浏览器后退、前进 浏览器提供了后退和前进按钮，可以方便地在浏览过的网页之间切换，WebDriver 还提供了对应的 back()和 forward()方法来模拟后退和前进按钮。下面通过例子演示这两个方法的使用。 为了看清楚脚本的执行过程，这里每操作一步都通过 print()打印当前的 URL 地址。 4.2.3 模拟浏览器刷新 有时候需要手动刷新（按「F5」键）Web 页面，可以通过 refresh（）方法实现。 4.3 WebDriver 中的常用方法 前面我们学习了定位元素的方法，但定位只是第一步，定位之后还需要对这个元素进行操作，比如，单击（按钮）或输入（输入框）。 （1）clear（）：清除文本

移动端 软键盘 弹出时 会影响布局 1）前段时间作的移动端页面，因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时，布局没有大影响。 当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。 原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。 解决办法： $(document).ready(function () { 　　$('body').height($('body')[0].clientHeight); }); 页面加载完后，js给body一个定高。 2）以前还遇到过，移动端点击输入框时，页面向左偏移了一部分，但太久了，忘了什么浏览器了，重现不了，解决的方法是使输入框的大小居中. PS:吐槽下华为自带浏览器和UC不识别css3的新单位，vw,vh. 来源： https://www.cnblogs.com/shuchong/p/5783226.html

第 4 章 WebDriver API 从本章开始正式学习 WebDriver API ，它可用来操作浏览器元素的一些类和方法 。 4.1 从定位元素开始 例如百度的首页，页面上有输入框、按钮、文字链接、图片等元素。自动化测试要做的就是模拟鼠标和键盘来操作这些元素，如单击、输入、鼠标悬停等。 而操作这些元素的前提是要定位它们。自动化工具，如何定位这些元素呢？ 通过浏览器自带的（F12）开发者工具可以看到，页面元素都是由 HTML 代码组成的，它们之间有层级地组织起来，每个元素有不同的标签名和属性值。WebDriver 就是根据这些信息来定位元素的。 WebDriver 提供了 8 种元素定位方法，在 Python 中，对应的方法如下： ● id 定位　→　find_element_by_id（） ● name 定位　→　find_element_by_name（） ● tag 定位　→　find_element_by_tag_name（） ● class 定位　→　find_element_by_class_name（） ● link_text　→　find_element_by_link_text() ● partial link 定位　→　find_element_by_partial_link_text（） ● XPath 定位　→　find_element_by_xpath

本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件 。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。 向 .form-control 添加前缀或后缀元素的步骤如下： 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。 把该 <span> 放置在 <input> 元素的前面或者后面。 为了保持跨浏览器的兼容性，请避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。 基本的输入框组 下面的实例演示了基本的输入框组： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的输入框组</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

相信大家对样式命名都多少感到困难，特别是想起一个有意义的名，更难。回顾了一下之前写的《 样式命名规则 》（不知道大家使用后有什么感想）结合这段时间使用上发现的一些问题，重新整理了样式的命名规则，希望能更实用些。 要避免当状态改变时名称失去意义，最常见的就是用于布局的类名，如“left”、“right”，当左边栏不再是左边栏的时候，“left”这个名就没有实际意义了（可以看下《 CSS代码命名惯例语义化的方法 》中的“CSS类命名的语义化VS结构化方式”部分）。这与我们所推荐的“命名要有意义”就相违背了，使用序号就更加有问题了。好像没错，不过有好长一段时间都有个问题让我很烦恼，如果一个页面中同个模块出现一次以上，而且细节还不一样，那后面出现的名称应该叫什么呢？难道“one”、“two”就不是序号？其实我们要避免遇到的情况就是当状态（表现）改变时，对应定义的类名不会失去意义。 所谓的状态（表现）改变，有几种情况： HTML不变，样式定义改变。 如果命名使用了表示某一状态的名称，如“red“、“font14“等，必定会引起定义与命名不符的情况，对后继的影响会造成比较大的影响。 样式定义不变，HTML改变。 HTML改变意味着类名可更换，也就是如果类名使用了表示某一状态的名称，反而更有利于修改。 样式定义与HTML都改变。 只需要考虑不要出现第一种情况的结果就可以了。