Как разрешить ввод всех типов символов - PullRequest
0 голосов
/ 26 сентября 2019

Я пытаюсь ограничить то, что пользователь может вводить в каждый ввод ... Все работает, как запланировано, кроме функции none ():

Я хочу, чтобы эта функция позволяла ВСЕ символы быть введенным во входные данные, где onKeyDown = "nothing ();".По какой-то причине те, которые находятся внутри функции nothing (), имеют ту же структуру, что и имя пользователя (это только текст и цифры).

, пожалуйста, помогите, это будет высоко ценится.Спасибо за ваше время ..

<?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 ]

0 голосов
/ 26 сентября 2019
  1. Удалить все onKeyDown="functionNameXXX();" из входного тега.

Проблема в том, что вы регистрируете событие каждый раз, когда изменяется входное значение.

Я только что изменил ваш код иэто сработало хорошо.

Код JS удалите все встроенные методы html и добавьте два обработчика, один для имени пользователя, а второй для других имен, никак не связанных с паролем и электронной почтой, если вы не желаете их проверять.

//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

 <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>
0 голосов
/ 26 сентября 2019

Неправильные части:

  • Вы не можете использовать this, когда используете встроенные прослушиватели событий html.
  • $ ('input') означает каждый вход, который будетпривязывать одни и те же события к каждому входу, вызывая дублирование каждый раз при вводе текста.

Что делать:

  1. Старайтесь не использовать встроенные прослушиватели событий.

    Это больше похоже на совет, но делает ваш код труднее для чтения и управления.Попробуйте связать события из JS.

  2. Опять же, $ ('input') означает буквально каждый ввод в документе, что не позволит вам создавать отдельные фильтры.Вы должны выбирать элементы с более конкретными селекторами, такими как $ ("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>
0 голосов
/ 26 сентября 2019

Прежде всего, ваш шаблон ни в чем не является неправильным (выдаст ошибку),

вы сказали, что он примет все символы, поэтому просто удалите событие keyDown, не требующее использования функции none ...

function ValidateName() {

  $("input").on("input", function() {
    $(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
  }) //IE

}

function ValidateFname() {

  $("input").on("input", function() {
    $(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
  }) //IE

}

function ValidateLname() {

  $("input").on("input", function() {
    $(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
  }) //IE

}

function ValidateIGN() {

  $("input").on("input", function() {
    $(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
  }) //IE

}
/*
function nothing() {

  $("input").on("input", function() {
    $(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...