监控页面所有input框的输入，并进行过滤

第一次的解决方案：

function input_filter(){var list=document.getElementsByTagName("input");//遍历所有符合条件的文本框，存储在strDatavar strData;for(var i=0;i<list.length && list[i];i++){if (list[i].type == "text"){strData=list[i]; strData.addEventListener('input',function(){strData.value = filterXSS(strData.value);},false);   }}}

对于这段代码，只能监控最后一个input的输入并进行过滤，然而在strData=list[i]; 后直接加alert(strData.id);省略addEventListener函数，则可以得到页面所有input的ID

第二种解决方案：

function input_filter(){document.querySelector('body').addEventListener('change', function() {var list=document.getElementsByTagName("input");//遍历所有符合条件的文本框，存储在strDatavar strData;for(var i=0;i<list.length && list[i];i++){if (list[i].type == "text"){strData=list[i];strData.value = filterXSS(strData.value);}}}, false);
}   input_filter();

其中，关于 querySelector有一篇文章写得不错http://www.nowamagic.net/librarys/veda/detail/388，原文前半部分如下：

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样：

`1`	`document.getElementById("test");`

现在我们来试试使用新方法来获取这个 DIV：

`1`	`document.querySelector("#test");`

`2`	`document.querySelectorAll("#test")[0];`

下面是个小演示：

我是 id 为 test 的 div

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

`1`	`document.querySelector("div.test>p:first-child");`

`2`	`document.querySelectorAll("div.test>p:first-child")[0];`

下面是个小演示：

我是层里的 p 标签

现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。在本文最后一个例子中，我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

`1`	`var` `emphasisText = document.querySelectorAll(".emphasis");`

`2`	`for(` `var` `i = 0 , j = emphasisText.length ; i < j ; i++ ){`

`3`	`emphasisText[i].style.fontWeight =` `"bold";`

4 }

这是原生方法，比起jquery速度快，缺点是IE6、7不支持。

监控页面所有input框的输入，并进行过滤相关推荐

【JS】实时监控页面，input框数值自动求和
需求: 有一个页面需要将input框填入的各个费用自动相加,添加到"合计费用"里. 解决方案: 使用jquery的blur实践,每个费用的Input框检测到失去焦点时,将所有的in ...
html页面input框输入不了,input框不能输入问题
input框不能输入问题今天在写程序设计登录页面的时候遇到了一个问题:输入框不能输入! 就是我写着写着想测试一下功能,就发现输入框不能输入了.???还能出现这种问题??就很疑惑,然后就搜了搜无法输入 ...
input框的输入事件
要求: input框只能输入数字. 问题: 只判断e.keyCode的情况下,在中文输入法中出现了e.keyCode均为229的情况,不论输入数字还是其他. 解决: 修改input框的type为num ...
html5div输入内容,将input框中输入内容显示在相应的div中【三种方法可选】
例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: #div{ width: 175px; height: 100px; margin: 20px 84px; border: ...
html判断整数小数点后两位小数点,js控制input框只能输入数字和一位小数点且小数点后面只有两位小数...
js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 212或 0.66; 过滤 00000,1.10,0.00 ...
ios input框无法输入问题
/* ios input框无法输入问题 */ input{ -webkit-user-select:auto !important; } 转载于:https://www.cnblogs.com/liu ...
JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法
JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法获取input框用户输入信息数组存储 var datas = {Id: idData.id,OrderDetailCode: ...
uniapp开发微信小程序input框限制输入
input框输入手机号的约束 <input @input="onlyNum" class="inp" v-model="phone" ...
让input框只输入英文
解决扫码枪在中文输入法时扫码冲突扫码枪在扫完码时会自动回车,这时如果是中文输入法就会触发输入法联想,再加一个回车,那么input框输入的就成中文了.如果可以控制input框只能输入英文那就好了.cs ...

监控页面所有input框的输入，并进行过滤

监控页面所有input框的输入，并进行过滤相关推荐

最新文章

热门文章