通过向该元素添加标记spellcheck="false"
或autocomplete="off"
,可以对单个输入元素禁用拼写检查或自动填充。
但是对于那些想要在整个DOM中全局禁用它的人来说,是否有办法使用vanilla javascript或HMTL(考虑到可以在页面生命周期内创建新的输入元素这一事实)?
答案 0 :(得分:2)
在vanilla javascript中,一个选项是迭代页面上的所有输入并应用必要的属性,如下所示:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
inputs[i].setAttribute("spellcheck", "false");
}
对于您无法控制新输入创建的更动态的情况,可以使用变异观察器将所需属性应用于动态创建:
window.addInput = function(){
var container = document.getElementById("container");
var input = document.createElement("input");
input.setAttribute("type", "text");
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
//MutationObserver docs: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
var observer = new MutationObserver(function (e){
for(var i = 0; i < e.length; i++){
for(var j = 0; j < e[i].addedNodes.length; j++){
if(["INPUT", "TEXTAREA"].indexOf(e[i].addedNodes[j].tagName) > -1){
e[i].addedNodes[j].setAttribute("spellcheck", "false");
console.log("attribute set")
}
}
}
}).observe(document.getElementById("container"), {childList:true});
<button onclick="addInput();">
Add Input
</button>
<div id="container">
</div>
答案 1 :(得分:1)
要处理动态元素,请尝试此
document.addEventListener('focus',function(e){
var elem = e.target;
if (elem && elem.tagName.toLowerCase()=="input" {
elem.spellcheck=false;
}
})
其他循环:
var inp = document.querySelectorAll("input[type=text], textarea");
for (var i=0; i<inp.length; i++){
inp[i].spellcheck=false;
inp[i].autocomplete="off";
}
答案 2 :(得分:0)
为了能够处理动态创建的元素,您应该使用 DOM Mutation Observers ,它可以监视DOM节点的更改并在此时触发回调:
// Create the mutation observer
var observer = new MutationObserver(function(mutations) {
// Loop through the mutations
mutations.forEach(function(mutation) {
// Loop through the mutation record for that mutation
for (var i = 0; i < mutation.addedNodes.length; i++){
// Cache current node being added
var n = mutation.addedNodes[i];
// Check node for an input
if(n.nodeName === "INPUT"){
// Set properties as desired
n.setAttribute("spellcheck", "false");
n.setAttribute("autocomplete", "off");
// Confirm changes to new element
console.log(n);
}
}
});
});
// Start observing the <body>
observer.observe(document.body, { childList: true });
// Dynamically add a new input
document.body.appendChild(document.createElement("input"));
&#13;