改进 javascript 功能以不允许按键保持

Question

我创建了一个函数来检查是否输入了禁止的字符并将其删除，一切正常，直到用户开始按住键。有人可以帮助改进吗？

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')">

Answer 1

添加 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">

改进 javascript 功能以不允许按键保持

Improve javascript function to not allow key holding

javascript

keydown

keyup