表单(form) 控件

  • 单选框和复选框  是否选中判断

1、表单元素不要设置高度，或者以em作为高度的单位。文字和边框的距离可以使用padding来实现。

 2、使用  input type='number' 表单 有缺陷：这个表单只能输入数字，但是 字母 e、字符+、-   确是可以输入。而 表单中有e、+、-符号输入，js获取的值确是一个空字符串。如图

　　　　    
           

　　 如果要实现只能输入数字，需要通过事件辅助处理。这种情况 使用 text表单，也可以模拟出数字表单控件。

            <input type="text" oninput="this.value=this.value.replace(/\D/g,'')">

　　如果是是在 移动端 要调用出 数字键盘的话，只能使用 number 控件，再通过事件辅助处理。

            <input type="number" oninput="this.value=this.value.replace(/\D/g,'')">

3、数字输入框常用的控制【只能输入数字和小数点】：https://blog.csdn.net/weixin_42171955/article/details/98734640

  • 只允许输入数字(整数：小数点不能输入) 
    <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >
  • 允许输入小数(两位小数) 
    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
  • 允许输入小数(一位小数) 
    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
  • 开头不能为0，且不能输入小数 
    <input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >
  • 只能输入数字或小数且第一位不能是0和点且只能有一个点 
    <input type="text" onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

4、

 

单选框和复选框  是否选中判断

 

1、复选框   （value值是提交给后台的值，不管有没有选中都是不变的）

　　只要复选框标签上有 checked 这个属性，不管这个属性有没有值或是false还是true，都是表示选中，在js中获取的 checked 属性值就是true；

　　当复选框标签上没有 checked 这个属性，则在js中获取的 checked 属性值就是false；

　　当选中这个复选框的时候，在js中获取的 checked 属性值就是true

总结：不管有没有设置checkbox 这个属性，反正只要选中这个复选框，在js中获取到他的 checkbox属性都是true；反之没有选中， js获取的值就是false。

注意：jQuery中Atrr获取checkbox 的值永远都是  undefined 。修补方法是用prop方法来解决。参考：   http://www.jb51.net/article/51136.htm

2、单选框（同复选框）

 

3、disabled 属性  （凡是按钮功能首选button标签，不要使用div）

disabled 属性规定，应该禁用 input 元素（包括button标签，但是div等其他标签没有想过）。被禁用的 input 元素既不可用，也不可点击。

4、 自定义复选框checkbox样式

 　　　　参考：https://blog.csdn.net/u014291497/article/details/52081774   或  http://www.xiumu.org/technology/style-checkboxes-with-css.shtml

　　　根据实际label有他的作用，所以改造了下结构：

<label for="myCheck">
<input type="checkbox" id="myCheck" style="display: none">
<div></div>
    <span>点我选中</span>
</label>
        #myCheck + div{
            background-color: white;
            border-radius: 5px;
            border:1px solid #d3d3d3;
            width:20px;
            height:20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 20px;
        }
        #myCheck:checked + div{
            background-color: #eee;
        }
        #myCheck:checked + div::after{
            content:"\2714";     //   \2714就是√对应的编码
            color: red;
        }

5、自定义 文件上传的控件样式：（所有非输入型表单控件样式修改的原理都一样）

　　这里以点击图片上传文件，为例：http://www.imooc.com/wenda/detail/382095

　　方案1：用 label 标签事件的传递性，label 标签的事件会传递给 for 属性绑定 id 的 input 元素。

　　方案2：将  input[type="file"]  铺在图片上，并设置opacity：0使其隐藏，当点击图片的时候实际上是点击的input。

　　方案3：直接操作dom，可以通过  js 触发  input[type="file"]  的点击事件。（点击图片，图片的事件函数，直接去触发input的click事件）

 

 

 

1、select默认选中项颜色为灰色，选择后变为黑色（js实现）

参考：http://www.cnblogs.com/zywaf/p/7149929.html

 2、js中怎么判断slect标签哪个被选中了

参考 ：https://blog.csdn.net/xiaoxiaoshuai__/article/details/72299446

　　 　http://www.runoob.com/jsref/dom-obj-select.html

3、select 中 类似占位符的属性是 selected ，如果这个占位符只是提示（如，“请选择”），不能选择的话，可以在这个option标签中在加一个disabled属性。

4、select去掉默认三角   ：   https://www.cnblogs.com/demonswang/p/6230705.html

5、select 文字右对齐  ：  https://www.cnblogs.com/flicat/p/4446784.html

6、select中的value是和option中的value对应的；当option中没有设置value属性的话，默认option中的value值就是标签中的文本。

7、select默认文字，不出现在下拉选项中 ：https://blog.csdn.net/github_35549695/article/details/53288569

各个表单控件在，在手机端表现

1、input[type="search"]，在软键盘上确认按钮变成搜索按钮

2、什么情况触发 from 的提交行为：from的提交行为，会引起页面刷新。 

　　a、回车时：1、没有submit按钮，表单里只有一个 input输入框，那么点击键盘enter就会触发提交事件【两个输入框不会触发】；

　　　　　　　  2、只要有submit按钮，回车就会触发提交事件

　　b、submit 按钮【type=submit】：点击这个按钮就会触发from的提交事件

　　3、js控制提交：js的 submit()，方法可以提交。但是不会触发onsubmit事件

form标签 有没有 必要使用

1、如果不用 H5 自带的一些表单API，form用不用无所谓。但是要用到直接API则就必须要加上 form 标签 才有效。

　  比如，表单的 invalid（校验） 事件，必须是触发了form的submit事件，才会触发 控件的的 invalid 功能。https://www.jc2182.com/javascript/javascript-html-dom-oninvalid-event.html

<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <button type="submit">提交</button>
</form>

　　注意：表单控件的 验证 API，有没有 form标签 都是有效的。 https://www.runoob.com/js/js-validation-api.html

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}

　　总结：如果要用 form 对象提供的API，则需要用到form标签。（如：submit 事件、reset事件、elements[] 属性等。    https://www.runoob.com/jsref/dom-obj-form.html）

　　　　　但是 默认 的提交行为是 会 跳转页面【拼接上参数】，一般都不会使用。

2、禁止from的提交行为（from的提交事件会刷新页面，影响用户体验）：https://blog.csdn.net/wobuaizhi/article/details/93069017

3、form 里面如果只有一个 input 控件，焦点在input时。直接按回车 就会触发form提交事件，刷新页面且url上拼接上 查询字符串【?name=】。  http://blog.sina.com.cn/s/blog_13887bf130102x02k.html

　  【亲测】这种情况很容易重现莫名其妙的bug。用 elementUI的<el-form> 时，就出现过上面标题填完，按了下回车直接跳转页面了；下面的富文本还没有输入呢。而其他地方因为里面 有2个以上的input控件，所以按回车就没有这个bug。找了好久的bug。

　　 elementUI 中解决方法直接用阻止默认事件的修饰符就可以了，参考  https://www.cnblogs.com/zhaoxiaoying/p/10209369.html

4、button 按钮的 type属性默认值是 submit ，
  所以 from表单 中的 button 没有指定type值，点击时 会触发 from表单的提交事件。https://blog.csdn.net/jal517486222/article/details/81459395

　  重点：from 中 button按钮 一定要 设置 type 属性【尤其是 这个 按钮 不提交 form事件的】。

5、from 中 不能有 type=submit 类型的按钮，但是 需要 填完 表单 ，回车 触发提交 事件。只能给form 绑定 回车 事件，触发提交。element 就是这么处理的，内部封装了 监听 回车事件 。

      <el-form @keyup.enter.native="onSubmit"> <!-- from 绑定 键盘回车事件 -->
        <el-form-item prop="phone">
          <el-input v-model="formPhone.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="button" @click="onSubmit">登录</el-button> <!--  不能有 type="submit" 的按钮 -->
        </el-form-item>
      </el-form>

 

总结：使用form 要注意的地方

　　a、禁止 from 默认的 提交行为，即 from 里面不能有 type=submit 类型的按钮。

　　b、from 里面的 button 按钮 一定要设置 type="button"【button不是提交 from的按钮时】。

　　c、type=submit 的按钮本来就是 为 from 设计的，但实际使用 这个放在from又是有问题。所以现在开发 基本不用 type=submit 的 按钮。

 

表单元素的属性（有效输入有效性）：https://www.cnblogs.com/larrywang/p/10504421.html 或 https://www.cnblogs.com/cjt-cn/p/5972749.html

 　说明：浏览器自带 一个 验证 结果，弹出提示框（即 oninvalid 事件 弹出框）。但是这个事件必须在form默认提交行为有效才会，触发这个 oninvalid。实际开发，基本会让form 的默认行为失效，所以自带的 验证弹出框 是没什么用。需要自己写

                                         

 　表单有效性相关的API：

　　　　DOM 属性：https://www.runoob.com/tags/tag-input.html

　　　　　　　　a、autocomplete 属性。输入框会提示你曾输入的值  【form、input标签都 有这个属性】

　　　　　　　　b、autofocus：

　　　　　　　　c、list：结合 datalist 标签使用。

　　　　　　　　d、required：

　　　　　　　　e、pattern

　　　　　　　　f、novalidate：提交表单时不应该验证 form 或 input 域  【form、input标签都 有这个属性】

　　　　　　　   g、min、max：规定 <input> 元素的最小值 或 最大值。【针对某些数字类型的表单有效，如 number、range、date、datetime、datetime-local、month、time 和 week】

　　　　　　　　h、maxlength：规定 <input> 元素中允许的最大字符数

　　　　　　　　i、readonly：

　　　　　　　　j、size：规定以字符数计的 <input> 元素的可见宽度

　　　　　　　　k、step：【number数据，增加的梯度】

　　　　js中表单对象的属性方法：  https://www.cnblogs.com/langli/archive/2013/11/27/3446641.html

　　　　　　　　a、validity 属性：返回一个 ValidityState对象。    https://www.cnblogs.com/founderswitch/p/7680190.html

　　　　　　　　b、checkValidity()：通过验证返回真，否则返回假 。 【form、input标签都 有这个方法】

　　　　　　　　c、setCustomValidity()：自定义错误提示信息。【浏览器内置的提示弹出框，一般不用这个】

posted @ 2018-05-11 14:38  吴飞ff  阅读(300)  评论(0)  编辑  收藏  举报