Улучшить функцию JavaScript, чтобы не допустить удержания клавиш - PullRequest
Новая
       85

Улучшить функцию JavaScript, чтобы не допустить удержания клавиш

0 голосов
/ 01 июня 2018

Я создал функцию, которая проверяет, были ли введены запрещенные символы, и удаляет их, все работает нормально, пока пользователь не начнет удерживать клавишу.Может ли кто-то помочь улучшить? 

function tooltip(object, type) {
var id = object.getAttribute('id');
var element = document.getElementById(id);
var value = document.getElementById(id).value;
var tooltip = document.getElementById("tooltip");
var parent = '#'+object.parentNode.id;
var string = /[\-&^_=+{}?\[\]\\!\£/>,`~:;" ()|<*%#\$]/;
if (type == 'limited') {
  var text = 'text';
}

if (string.test(value)) {
  element.value = element.value.replace(string, '');

  if (!tooltip && value != '') {
     $(parent).append('<div id="tooltip"><div class="arrow arrow-down"></div>'+text+'</div>');
     setTimeout(function() {
        $(parent +' #tooltip').fadeOut(500);
        setTimeout(function() {
           $(parent +' #tooltip').remove();
        }, 500);
     }, 5000);
  }
 }
}

<input id="username" type="text" onkeyup="tooltip(this, 'limited')">

1 Ответ

0 голосов
/ 01 июня 2018

Добавить onkeydown событие и добавить сопряжение для keydown и keyup событий, подобных следующим. 

var marked = true;

$("#username").keydown(function(e) {
  if(!marked) {e.preventDefault(); return;}; // will return for long press
  marked = false;
});


function tooltip(object, type) {
    marked = true;
    var id = object.getAttribute('id');
    var element = document.getElementById(id);
    var value = document.getElementById(id).value;
    var tooltip = document.getElementById("tooltip");
    var parent = '#' + object.parentNode.id;
    var string = /[\-&^_=+{}?\[\]\\!\£/>,`~:;" ()|<*%#\$]/;
    if (type == 'limited') {
      var text = 'text';
    }

    if (string.test(value)) {
      element.value = element.value.replace(string, '');

      if (!tooltip && value != '') {
        $(parent).append('<div id="tooltip"><div class="arrow arrow-down"></div>' + text + '</div>');
        setTimeout(function() {
          $(parent + ' #tooltip').fadeOut(500);
          setTimeout(function() {
            $(parent + ' #tooltip').remove();
          }, 500);
        }, 5000);
      }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="username" type="text" onkeyup="tooltip(this, 'limited')">

РЕДАКТИРОВАТЬ (согласно комментариям) 

var marked = true;


$("#username").on('keydown keyup', function( e ) { 
  if(e.type=="keydown") { 
    if(!marked) {e.preventDefault(); return;}; // will return for long press
    marked = false;
  } else {
    marked = true;
    tooltip(e.currentTarget, 'limited');
  }
});

function tooltip(element, type) {
    var id = element.id;
    var value = element.value;
    var tooltip = document.getElementById("tooltip");
    var parent = '#' + element.parentNode.id;
    var string = /[\-&^_=+{}?\[\]\\!\£/>,`~:;" ()|<*%#\$]/;
    if (type == 'limited') {
      var text = 'text';
    }

    if (string.test(value)) {
      element.value = element.value.replace(string, '');

      if (!tooltip && value != '') {
        $(parent).append('<div id="tooltip"><div class="arrow arrow-down"></div>' + text + '</div>');
        setTimeout(function() {
          $(parent + ' #tooltip').fadeOut(500);
          setTimeout(function() {
            $(parent + ' #tooltip').remove();
          }, 500);
        }, 5000);
      }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="username" type="text">
...