如何允許所有字符類型進入輸入
[英]How to allow all character types into an input
問題描述
我試圖限制用戶可以在每個輸入中輸入的內容......除了 nothing() function 之外，一切都按計划進行：
我希望這個 function 允許將所有字符輸入到 onKeyDown="nothing();" 的輸入中。 由於某種原因， nothing() function 中的那些遵循與用戶名相同的布局（僅是文本和數字）。
請幫助它將不勝感激。 謝謝你的時間..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? <a href="#">Sign in (unfinished)</a>.</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>
3 個解決方案
解決方案1
0 2019-09-26 05:20:16
首先你的模式沒有錯（會拋出錯誤），
你說它會接受所有字符，所以只需刪除 keyDown 事件就不需要什么 function ...
function ValidateName() { $("input").on("input", function() { $(this).val($(this).val().replace(/[^0-9|AZ|az]/g, '')); }) //IE } function ValidateFname() { $("input").on("input", function() { $(this).val($(this).val().replace(/[^AZ|az]/g, '')); }) //IE } function ValidateLname() { $("input").on("input", function() { $(this).val($(this).val().replace(/[^AZ|az]/g, '')); }) //IE } function ValidateIGN() { $("input").on("input", function() { $(this).val($(this).val().replace(/[^AZ|az]/g, '')); }) //IE } /* function nothing() { $("input").on("input", function() { $(this).val($(this).val().replace(/[^AZ|az][^-,]/g, '')); }) //IE } */
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="width:50%; margin:auto;"> <h1>Register</h1> <p>Please fill in this form to create an account.</p> <hr> <label for="username"><b>Username:</b></label> <input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();"> <label style="width:50%" for="fname"><b>First Name:</b></label> <input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();"> <label for="lname"><b>Last Name:</b></label> <input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br> <label for="dob"><b>Date of Birth</b></label> <input type="date" placeholder="" name="dob"> <br><br> <label for="ingame"><b>In Game Name:</b></label> <input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();"> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()"> <label for="pw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+"> <label for="psw-repeat"><b>Confirm Password</b></label> <input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+"> <button onclick="" name="register" type="submit" class="register">Register</button> </div>
解決方案2
0 已采納 2019-09-26 07:04:25
- 刪除所有
onKeyDown="functionNameXXX();"從輸入標簽。
問題是每次輸入值更改時您都在注冊事件。
我剛剛修改了你的代碼，它運行良好。
JS 代碼刪除所有 html 內聯方法並添加兩個處理程序，一個用於用戶名，第二個用於其他名稱，與密碼和 email 無關，如果您不願意驗證它們。
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML從所有輸入中刪除onkeydown並在 fname、lname 和 IGN 字段中添加 class
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? <a href="#">Sign in (unfinished)</a>.</p>
</form>
解決方案3
0 2019-09-26 07:41:05
錯誤的部分：
- 當您使用 html 內聯事件偵聽器時，您不能使用
this。 - $('input') 表示每個輸入，它將相同的事件綁定到每個輸入，每次輸入文本時都會導致重復。
你該怎么辦：
盡量不要使用內聯事件偵聽器。
這更像是一個建議，但它使您的代碼更難閱讀和更難管理。 嘗試從 JS 綁定事件。同樣，$('input') 意味着文檔中的每個輸入，這將阻止您制作單獨的過濾器。 您應該使用更具體的選擇器 select 元素，例如 $("input[name='username']")。 您可以從這里看到各種選擇器： https://www.w3schools.com/cssref/css_selectors.asp
這將是您的代碼：
$("input[name='username']").on('input', function(){ $(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, '')); }) $("input[name='fname']").on('input', function(){ $(this).val($(this).val().replace(/[^A-Za-z]/g, '')); }) $("input[name='lname']").on('input', function(){ $(this).val($(this).val().replace(/[^A-Za-z]/g, '')); }) $("input[name='ingame']").on('input', function(){ $(this).val($(this).val().replace(/[^A-Za-z]/g, '')); })
<html> <head> <title>Registration</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form action="registration.php" method="post" name = "register" > <div style="width:50%; margin:auto;"> <h1>Register</h1> <p>Please fill in this form to create an account.</p> <hr> <label for="username"><b>Username:</b></label> <input type="text" placeholder="Username" name="username"> <label style="width:50%" for="fname"><b>First Name:</b></label> <input type="text" placeholder="Enter First Name" name="fname"> <label for="lname"><b>Last Name:</b></label> <input type="text" placeholder="Ender Last Name" name="lname"><br><br> <label for="dob"><b>Date of Birth</b></label> <input type="date" placeholder="" name="dob"> <br><br> <label for="ingame"><b>In Game Name:</b></label> <input type="text" placeholder="Enter In Game Name" name="ingame"> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email"> <label for="pw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="pw"> <label for="psw-repeat"><b>Confirm Password</b></label> <input type="password" placeholder="Repeat Password" name="confpw"> <button onclick="" name="register" type="submit" class="register">Register</button> </div> <div style="width:50%; margin;auto;"> <p>Already have an account? <a href="#">Sign in (unfinished)</a>.</p> </div> </form> </body> </html>
如何使用輸入type = file在接受的文件類型中沒有限制？
[英]How to allow no limits in accepted file types using input type=file?
如何在 javascript 的輸入字段中只允許字符輸入 (az,AZ)？
[英]How do I allow only character input (a-z,A-Z) in my input field in javascript?
如何只允許使用javascript輸入0到30之間的數字或A，D字符輸入？
[英]How to allow only numbers between 0 to 30 or A,D character in input using javascript?
用戶在內容可編輯輸入字段中鍵入斜杠字符 (/) 后如何插入空格？
[英]How to insert a space after user types the slash character (/) inside a content editable input field?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.