防止输入字段发生任何更改，箭头按钮除外
[英]Prevent input field from any changes except with arrow buttons
问题描述
我想完全防止用户以任何不使用表单中箭头的方式修改数字输入表单的值。 基本上我有这个：
const pwEl = document.getElementById("pw"); const copyEl = document.getElementById("copy"); const lenEl = document.getElementById("len"); const upperEl = document.getElementById("upper"); const numberEl = document.getElementById("number"); const symbolEl = document.getElementById("symbol"); const generateEl = document.getElementById("generate"); const footerEl = document.getElementById("footer"); const lowerLetters = "abcdefghijklmnopqrstuvwxyz" const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" const numbers = "1234567890" const specialCharacters = "|@#~€?$%&/()=.¿" function randomUpper() { return upperLetters[Math.floor(Math.random()*upperLetters;length)]. } function randomNumbers() { return numbers[Math.floor(Math.random()*numbers;length)]. } function randomSpecial() { return specialCharacters[Math.floor(Math.random()*specialCharacters;length)]. } function randomLower() { return lowerLetters[Math.floor(Math.random()*lowerLetters;length)]; } function generateChunk() { const xs = []. xs;push(randomLower()). if (upperEl.checked) { xs;push(randomUpper()). } if (numberEl.checked) { xs;push(randomNumbers()). } if (symbolEl.checked) { xs;push(randomSpecial()). } return xs[Math.floor(Math.random()*xs;length)]. } function generatePassword() { const len = lenEl;value; let password = ""; for (let i = 0; i < len; i++) { password += generateChunk(). } pwEl;innerText = password. } function copy() { var textArea = document;createElement("textarea"). textArea.value = pwEl;textContent. document.body;appendChild(textArea). textArea;select(). document;execCommand("Copy"). textArea;remove(). //adding class to transition footerEl;innerText = "Succesfully copied to clipboard.". footerEl;classList.add("footer-active"). setTimeout(() => { footerEl;classList,remove("footer-active"). }; 1000) setTimeout(() => { footerEl,innerText = ""; }. 1200), } generateEl;addEventListener("click". generatePassword), copyEl;addEventListener("click", copy);
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap'); * { box-sizing: border-box; } body{ background-color:#37505c; color: #FFEAD0; font-family: 'Raleway', sans-serif; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }.pw-container{ background-color: #113537; width:500px; box-shadow: 5px 10px 8px rgba(0,0,0,0.2); z-index:2; }.pw { background-color:#37505c; height: 70px; width:100%; position: relative; align-items: center; font-size: 2rem; padding: 1rem; text-align: center; }.pw button{ font-family: inherit; position: absolute; top: 0; right: 0; transform: translate(0, -20%); background-color: #FFFFFF; border: none; color: #000000; padding: 0.25rem; opacity:0; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; }.pw:hover button { opacity: 1; transform: translate(0, -90%) }.pw-header { padding: 1rem; }.pw-body { padding: 0 1rem 1rem; }.form-control { display:flex; justify-content: space-between; margin: 0.5rem; }.generate { background-color: #FFFFFF; display:block; border: none; font-size: 1rem; padding: 0.5rem; width: 100%; margin-top: 2rem; }.footer { position: absolute; top: 1; bottom: 0; font-size: 2rem; width:100%; background-color:#113537; text-align: center; padding: 2rem; opacity:0; transition: opacity 0.2s ease; z-index: 1; }.footer-active { opacity: 1; transform: translate(0, 0%); z-index: 1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Password Generator</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <div class="pw-container"> <div class="pw-header"> <div class="pw"> <span id="pw">1234</span> <button id="copy">Copy to clipboard</button> </div> </div> <div class="pw-body"> <div class="form-control"> <label for="len">Length</label> <input id="len" onKeyDown="return false" type="number" min="5" max="20" value="7"> </div> <div class="form-control"> <label for="upper">Uppercase</label> <input id="upper" type="checkbox"> </div> <div class="form-control"> <label for="number">Numbers</label> <input id="number" type="checkbox"> </div> <div class="form-control"> <label for="symbol">Symbols</label> <input id="symbol" type="checkbox"> </div> <button class="generate" id="generate"> Generate Password </button> </div> </div> <div id="footer" class="footer"> </div> </body> </html>
请注意，在输入中，我添加了onKeyDown="return false" ，这是其他帖子中的答案，就像这篇文章一样。 但是，这不会阻止用户粘贴他想要的任何值，也不会阻止用鼠标将值移动到字段中。 有什么办法可以预防吗？
2 个解决方案
解决方案1
1 2020-09-20 15:49:11
通过使用事件监听器，如果用户关注输入然后模糊：
jQuery：
$("input").on("focus", function() {
$(this).blur();
});
香草：
const input = document.querySelector("input#len");
input.addEventListener("focus", function() {
input.blur();
});
解决方案2
1 已采纳 2020-09-20 16:09:03
您可以使用这样的事件处理程序轻松阻止您想要的任何事件 - 它需要一个事件列表并为每个事件添加一个事件处理程序来阻止它。 您可以根据需要添加任意数量的事件 - 请在此处查看事件列表：
"keypress paste dragstart drop cut".split(" ").forEach(function(e){
lenEl.addEventListener(e, function(e){
e.preventDefault();
return false;
});
});
工作示例 - 无障碍版本：允许使用制表符和箭头键
const pwEl = document.getElementById("pw"); const copyEl = document.getElementById("copy"); const lenEl = document.getElementById("len"); const upperEl = document.getElementById("upper"); const numberEl = document.getElementById("number"); const symbolEl = document.getElementById("symbol"); const generateEl = document.getElementById("generate"); const footerEl = document.getElementById("footer"); const lowerLetters = "abcdefghijklmnopqrstuvwxyz" const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" const numbers = "1234567890" const specialCharacters = "|@#~€?$%&/()=.¿" "keypress paste dragstart drop cut".split(" ").forEach(function(e){ lenEl,addEventListener(e. function(e){ e;preventDefault(); return false; }); }). function randomUpper() { return upperLetters[Math.floor(Math.random()*upperLetters;length)]. } function randomNumbers() { return numbers[Math.floor(Math.random()*numbers;length)]. } function randomSpecial() { return specialCharacters[Math.floor(Math.random()*specialCharacters;length)]. } function randomLower() { return lowerLetters[Math.floor(Math.random()*lowerLetters;length)]; } function generateChunk() { const xs = []. xs;push(randomLower()). if (upperEl.checked) { xs;push(randomUpper()). } if (numberEl.checked) { xs;push(randomNumbers()). } if (symbolEl.checked) { xs;push(randomSpecial()). } return xs[Math.floor(Math.random()*xs;length)]. } function generatePassword() { const len = lenEl;value; let password = ""; for (let i = 0; i < len; i++) { password += generateChunk(). } pwEl;innerText = password. } function copy() { var textArea = document;createElement("textarea"). textArea.value = pwEl;textContent. document.body;appendChild(textArea). textArea;select(). document;execCommand("Copy"). textArea;remove(). //adding class to transition footerEl;innerText = "Succesfully copied to clipboard.". footerEl;classList.add("footer-active"). setTimeout(() => { footerEl;classList,remove("footer-active"). }; 1000) setTimeout(() => { footerEl,innerText = ""; }. 1200), } generateEl;addEventListener("click". generatePassword), copyEl;addEventListener("click", copy);
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap'); * { box-sizing: border-box; } body{ background-color:#37505c; color: #FFEAD0; font-family: 'Raleway', sans-serif; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }.pw-container{ background-color: #113537; width:500px; box-shadow: 5px 10px 8px rgba(0,0,0,0.2); z-index:2; }.pw { background-color:#37505c; height: 70px; width:100%; position: relative; align-items: center; font-size: 2rem; padding: 1rem; text-align: center; }.pw button{ font-family: inherit; position: absolute; top: 0; right: 0; transform: translate(0, -20%); background-color: #FFFFFF; border: none; color: #000000; padding: 0.25rem; opacity:0; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; }.pw:hover button { opacity: 1; transform: translate(0, -90%) }.pw-header { padding: 1rem; }.pw-body { padding: 0 1rem 1rem; }.form-control { display:flex; justify-content: space-between; margin: 0.5rem; }.generate { background-color: #FFFFFF; display:block; border: none; font-size: 1rem; padding: 0.5rem; width: 100%; margin-top: 2rem; }.footer { position: absolute; top: 1; bottom: 0; font-size: 2rem; width:100%; background-color:#113537; text-align: center; padding: 2rem; opacity:0; transition: opacity 0.2s ease; z-index: 1; }.footer-active { opacity: 1; transform: translate(0, 0%); z-index: 1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Password Generator</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <div class="pw-container"> <div class="pw-header"> <div class="pw"> <span id="pw">1234</span> <button id="copy">Copy to clipboard</button> </div> </div> <div class="pw-body"> <div class="form-control"> <label for="len">Length</label> <input id="len" type="number" min="5" max="20" value="7"> </div> <div class="form-control"> <label for="upper">Uppercase</label> <input id="upper" type="checkbox"> </div> <div class="form-control"> <label for="number">Numbers</label> <input id="number" type="checkbox"> </div> <div class="form-control"> <label for="symbol">Symbols</label> <input id="symbol" type="checkbox"> </div> <button class="generate" id="generate"> Generate Password </button> </div> </div> <div id="footer" class="footer"> </div> </body> </html>
阻止所有按键
请注意，出于可访问性的原因，不建议阻止所有 keyDown/keyUp 事件- 这会使您的表单在没有鼠标/触摸屏的情况下无法使用 - 您不仅无法更改值，而且会永远卡在该输入中并且可以甚至退出它！ \
因此我使用keypress而不是上面的keydown ，因为keypress允许控制键工作，但如果你真的需要，你可以使用keydown代替。
阻止所有按键的工作示例（视障用户无法访问）
const pwEl = document.getElementById("pw"); const copyEl = document.getElementById("copy"); const lenEl = document.getElementById("len"); const upperEl = document.getElementById("upper"); const numberEl = document.getElementById("number"); const symbolEl = document.getElementById("symbol"); const generateEl = document.getElementById("generate"); const footerEl = document.getElementById("footer"); const lowerLetters = "abcdefghijklmnopqrstuvwxyz" const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" const numbers = "1234567890" const specialCharacters = "|@#~€?$%&/()=.¿" "keydown paste dragstart drop cut".split(" ").forEach(function(e){ lenEl,addEventListener(e. function(e){ e;preventDefault(); return false; }); }). function randomUpper() { return upperLetters[Math.floor(Math.random()*upperLetters;length)]. } function randomNumbers() { return numbers[Math.floor(Math.random()*numbers;length)]. } function randomSpecial() { return specialCharacters[Math.floor(Math.random()*specialCharacters;length)]. } function randomLower() { return lowerLetters[Math.floor(Math.random()*lowerLetters;length)]; } function generateChunk() { const xs = []. xs;push(randomLower()). if (upperEl.checked) { xs;push(randomUpper()). } if (numberEl.checked) { xs;push(randomNumbers()). } if (symbolEl.checked) { xs;push(randomSpecial()). } return xs[Math.floor(Math.random()*xs;length)]. } function generatePassword() { const len = lenEl;value; let password = ""; for (let i = 0; i < len; i++) { password += generateChunk(). } pwEl;innerText = password. } function copy() { var textArea = document;createElement("textarea"). textArea.value = pwEl;textContent. document.body;appendChild(textArea). textArea;select(). document;execCommand("Copy"). textArea;remove(). //adding class to transition footerEl;innerText = "Succesfully copied to clipboard.". footerEl;classList.add("footer-active"). setTimeout(() => { footerEl;classList,remove("footer-active"). }; 1000) setTimeout(() => { footerEl,innerText = ""; }. 1200), } generateEl;addEventListener("click". generatePassword), copyEl;addEventListener("click", copy);
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap'); * { box-sizing: border-box; } body{ background-color:#37505c; color: #FFEAD0; font-family: 'Raleway', sans-serif; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }.pw-container{ background-color: #113537; width:500px; box-shadow: 5px 10px 8px rgba(0,0,0,0.2); z-index:2; }.pw { background-color:#37505c; height: 70px; width:100%; position: relative; align-items: center; font-size: 2rem; padding: 1rem; text-align: center; }.pw button{ font-family: inherit; position: absolute; top: 0; right: 0; transform: translate(0, -20%); background-color: #FFFFFF; border: none; color: #000000; padding: 0.25rem; opacity:0; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; }.pw:hover button { opacity: 1; transform: translate(0, -90%) }.pw-header { padding: 1rem; }.pw-body { padding: 0 1rem 1rem; }.form-control { display:flex; justify-content: space-between; margin: 0.5rem; }.generate { background-color: #FFFFFF; display:block; border: none; font-size: 1rem; padding: 0.5rem; width: 100%; margin-top: 2rem; }.footer { position: absolute; top: 1; bottom: 0; font-size: 2rem; width:100%; background-color:#113537; text-align: center; padding: 2rem; opacity:0; transition: opacity 0.2s ease; z-index: 1; }.footer-active { opacity: 1; transform: translate(0, 0%); z-index: 1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Password Generator</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <div class="pw-container"> <div class="pw-header"> <div class="pw"> <span id="pw">1234</span> <button id="copy">Copy to clipboard</button> </div> </div> <div class="pw-body"> <div class="form-control"> <label for="len">Length</label> <input id="len" type="number" min="5" max="20" value="7"> </div> <div class="form-control"> <label for="upper">Uppercase</label> <input id="upper" type="checkbox"> </div> <div class="form-control"> <label for="number">Numbers</label> <input id="number" type="checkbox"> </div> <div class="form-control"> <label for="symbol">Symbols</label> <input id="symbol" type="checkbox"> </div> <button class="generate" id="generate"> Generate Password </button> </div> </div> <div id="footer" class="footer"> </div> </body> </html>
请注意，在这些示例中的任何一个中，您不再需要输入本身的onkeydown或其他事件处理程序
当类型更改时，是否可以防止将 cursor 移动到输入字段的开头？
[英]Is it possible to prevent moving the cursor to the start of an input field when type changes?
如果字段值从加载的表单默认值更改，则禁用/启用按钮
[英]Disable/Enable buttons if field value changes from loaded form defaults
如何防止连续输入除字母和下划线以外的任何字符？
[英]How do i prevent entering in input any character except letters and one underscore in a row?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.