我的表单中有两个字段,一个是emailid
,另一个是password
。我希望防止用户粘贴到这些字段中。他们应该被强制手动输入,就像Google表单一样。
我的表单中有两个字段,一个是emailid
,另一个是password
。我希望防止用户粘贴到这些字段中。他们应该被强制手动输入,就像Google表单一样。
可以使用copy
和paste
事件来防止这些操作,或者修改被复制或粘贴的数据。 (有关浏览器支持,请参见链接)
<input type="text" onpaste="return false">
或使用更长的JavaScript版本:
const elem = document.getElementById('nopaste');
elem.addEventListener('paste', (event) => {
event.preventDefault();
});
<input type="text" placeholder="can paste"><br>
<input type="text" id="nopaste" placeholder="can not paste">
您可以禁用ctrl+v
组合键和右键单击
。
对于IE浏览器,您可以使用以下事件处理程序:
onpaste="return false;"
oncut="return false;"
oncontextmenu="return false;"
oncopy="return false;".
这是一个适用于所有浏览器的解决方法:
function noCTRL(e) {
var code = (document.all) ? event.keyCode : e.which;
var ctrl = (document.all) ? event.ctrlKey : e.modifiers & Event.CONTROL_MASK;
var msg = "Sorry, this functionality is disabled.";
if (document.all) {
if (ctrl && code == 86) {
//CTRL+V
alert(msg);
window.event.returnValue = false;
} else if (ctrl && code == 67) {
//CTRL+C (Copy)
alert(msg);
window.event.returnValue = false;
}
} else {
if (ctrl == 2) {
//CTRL key
alert(msg);
return false;
}
}
}
在HTML部分,您的字段将如下所示:Email :<input name="email" type="text" value=""/><br/>
Password :<input name="password" type="password" value=""/><br/>
Confirm Email :<input name="email" type="text" value="" onkeydown="return noCTRL(event)"/>
Confirm Password :<input name="password" type="password" value="" onkeydown="return noCTRL(event)"/>
如果输入类型为password
,我认为用户无法复制密码字段。
希望这可以帮到你。
注意:
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">Try copying and pasting text into this field!</textarea>
<h3>Log:</h3>
<p id="log"></p>
JavaScript
function logCopy(event) {
log.innerText = 'Copied!\n' + log.innerText;
}
function logPaste(event) {
log.innerText = 'Pasted!\n' + log.innerText;
}
const editor = document.getElementById('editor');
const log = document.getElementById('log');
editor.oncopy = logCopy;
editor.onpaste = logPaste;
复制
document.addEventListener("copy", (e) => {
console.log("copy")
});
粘贴
document.addEventListener("paste", (e) => {
console.log("paste")
});
2022年更新:
如果想要输入元素在粘贴操作时接收onChange事件,请按照以下方式提及onpaste选项
<input onpaste='return true' onChange={handleChange}/>