input

Page 1 of 1

Archives

文件夹

最近用的比较多,在这里总结一下。 要注意的是我下面的东西主要是在移动端开发测试的,chrome也测试了,pc端其他浏览器我会在之后补上说明的。 我这里说的click是已经优化过的点击,自己在合适的时候切换成touch。 另外,无视jquery2+。 大家都知道的 在input外面加上label,或者通过label中的for属性指向input,可以通过点击label区域触发input的change或者focus。 针对radio和checkBox主要就是change事件。 那么触发input:radio和input:checkBox会有什么操作呢? radio:如果已选中,不会有变化。如果未选中,那么在同一个name里面,选中该radio,原来选中的radio取消选中。 checkBox: 如果已选中,取消选中;如果未选中,改变为选中状态。 你可能不知道的 前提: 这里以jquery的语法描述。 不在html中直接操作checked属性,因为要做遍历。 先说radio: 我们要通过label间接改变一个radio组的状态可以用click事件,也可以用change事件 以$(this).find(“input:radio”).is(‘:checked’)来判断当前的子元素是不是选中状态。 以$(this).find(“input:radio”).get(0).checked = false;来取消选中状态(如果你默认一个都不选中有可能会用到这个)。 click与change的区别就是,不管你该元素的状态是否变化,click都会触发。 而change只有在你元素选中与否变化时才会触发。所以我认为change是优选。 而你想通过其他方式修改这组单选状态的时候,可以通过$(this).find(“input:radio”).eq(index).trigger(“click”)来实现,不能用change。 以上的操作在pc端是没问题的,但是在移动端,想用change操作input的属性是不可以的。 那checkBox呢: 从上面对radio和radio其实没有不同。 但在做特别样式的展示,并且要把丑陋的input隐藏时,要注意保持展示和看不到的input状态是一致的。 我开始用click测试的时候就发现展示状态改变正常,但是input可能没有变化~ 总结一些用法 如何确定该选择项目是否被选中: 有人说我要用$(this).attr(“checked”)来查看当前状态,那在我上面说的这个方发现,这么判断永远是空… 用$(this).is(‘:checked’)可以达到判断是否选中。当然你愿意用class标记是否选中也可以。 change和click: pc端用change提高效率,移动端用click。 综合实例说事 点击查看实例 >> 或者扫码。

之前的几个项目一直纠结一个问题,就是input的type值可不可以通过什么方法直接切换。以保证密码输入框可以做到英文字符和点点之间自行切换,而不是覆盖一个文本层在上面坐事件或者别的什么方法。 好吧我还是上图吧: 之前发现js里面有一个obj.type的属性可以直接改input里面的type值。 结果昨天测试发现不兼容ie9以下的ie浏览器。顿时泪奔。 所以现在的做法 依然是覆盖一个i额层在这个password上面来解决这个问题。 还有一个方法就是给3个跟password有关的input <input class=”input1″ type=”text” value=”文字内容”/> <input class=”input2″ type=”password” value=”密码内容”/> <input class=”input3″ type=”hidden” value=”用来接收密码,提供给程序”/> 然后无非就是全部隐藏,需要显示文字的时候显示input1,input1获得焦点时隐藏掉input1,显示input2并把焦点光标给input2~剩下的逻辑你懂的。