Запретить пользователям отправку формы с помощью Enter, но разрешить ввод ключа в одном поле ввода формы - PullRequest
Новая
       40

Запретить пользователям отправку формы с помощью Enter, но разрешить ввод ключа в одном поле ввода формы

0 голосов
/ 17 декабря 2018

Итак, у меня есть форма с jQuery, которая запрещает пользователю отправлять форму с помощью клавиши ввода.

Вот код: 

$(document).ready(function() {
    // code prevents user submitting form using the enter button - must use submit button.
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });
    .....
});

Как мне теперь разрешить клавишу вводаиспользоваться в одном поле ввода, если у меня есть идентификатор?Клавиша ввода должна работать только с этим одним полем ввода формы.

Можно ли это сделать с помощью поля ввода css вместо идентификатора?

Можно ли это сделать с помощью имени поля ввода?

Вот поле ввода: 

<input id="id_tags__tagautosuggest" name="tags" type="text" class="kmw-disabled keymanweb-font">

Я попробовал несколько попыток и нашел ответ в Google, но не могу заставить его работать.

Ответы [ 3 ]

0 голосов
/ 17 декабря 2018

я разделяю более простое решение ...

вы можете добавить класс .disable_enter к входу, который вы хотите отключить submit-by-enter .. 

<form>
    <input type="text" name="field1" class="disable_enter" />
    <input type="text" name="field2" class="disable_enter" />
    <input type="text" name="field3" />
    <button type="submit">Submit</button>
</form>

. 

$('form .disable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

Только field3 будет разрешено быть submit-by-enter ..

Проверьте эту скрипку для вашего удобства: http://jsfiddle.net/syamsoul/vu1b7gfs/

| ------------------------ |

| ------------------------ |

Или вы можете сделать реверс ... отключить ввод для всех входных данных ... но вместо этого использовать класс .enable-enter, чтобы включить submit-by-enter .. 

<form>
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="text" name="field3" class="enable_enter" />
    <button type="submit">Submit</button>
</form>

. 

$('form *').not('.enable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

Только field3 будет разрешено быть submit-by-enter ..

Проверьте эту скрипку для вашего удобства: http://jsfiddle.net/syamsoul/h567mtnq/

0 голосов
/ 17 декабря 2018

Чтобы узнать больше о "не JQuery" -> http://api.jquery.com/not/

 $('window').not('#id_tags__tagautosuggest').keydown(function(event){

   //Your code...
   if(event.keyCode == 13) {
        event.preventDefault();
        return false;
    }

});
0 голосов
/ 17 декабря 2018

Вы можете использовать event.target.id для запрета и разрешения определенных входов. 

 $(window).keydown(function(event){      
        if(event.keyCode == 13) {
          if(event.target.id==="allowedInput"){
            alert('submit form')
          }else{
            alert('not submitting')
            event.preventDefault();
            return false;
          }

        }
    });

Демонстрация: 

$(window).keydown(function(event) {

  if (event.keyCode == 13) {
    if (event.target.id === "allowedInput") {
      alert('submit form')
    } else {
      alert('not submitting')
      event.preventDefault();
      return false;
    }

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="allowedInput" name="allowedInput" type="text" class="kmw-disabled keymanweb-font">

<input id="notallowedInput" name="notallowedInput" type="text" class="kmw-disabled keymanweb-font">

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

для ex event.target.matches("#allowedInput") это будет соответствовать входу с селектором, выможете добавить свое имя или имя класса тоже.

...