Home / Questions / 56409
Accepted
hubman
Asked: 2020-03-20 08:32:07 +0800 CST 2020-03-20 08:32:07 +0800 CST

每个键只写一次，忽略重复

  • 772

我希望当一个键被长时间按下时，它不会被多次输入。

ejemplo:
tecla      tiempo      resultado
  a           3seg        a

我制作了这段代码，但它不起作用，请使用所有 3 个事件。

var texto=document.getElementById("texto");
var pulsado=false;
texto.addEventListener('keydown', function(keyboardEvent) {
    if(pulsado) return false;
    pulsado=true;
});
texto.addEventListener('keypress', function(keyboardEvent) {
    if(!pulsado){
                
    }
});
texto.addEventListener('keyup', function(keyboardEvent) {
    pulsado=false;
});
<textarea id="texto"></textarea>

javascript

7 Answers

  1. Best Answer

    我希望在快速打字时长按按键而不是多次键入
    [...]
    ，而不是所有内容都已键入。我该如何改进它？


    我们需要知道用户何时重复按键，而不是时间。为此，我们使用KeyboardEvent.repeat属性，当键没有被抬起并按住时返回 true，生成连续的击键。

    var texto=document.getElementById("texto");

texto.addEventListener('keydown', function(keyboardEvent) {
    //Si se está repitiendo, ignorar
    if (keyboardEvent.repeat)
        keyboardEvent.preventDefault();
});
    <textarea id="texto" style="width: 100%; height: 8em"></textarea>


    适配不同版本的 Internet Explorer

    IE 仍然是规则的例外（-多么奇怪，对吧？）。在这种情况下，当我们将事件与 关联时addEventListener()，IE 总是返回KeyboardEvent.repeat == false。相反，它在使用attachEvent时返回正确的值......

    但还有更多，从 IE11 开始不推荐使用 attachEvent，没有直接的解决方案。因此，为了解决第二个问题，我们使用X-UA-Compatible legacy 模式的 meta 标签：<meta http-equiv="X-UA-Compatible" content="IE=10" />。

    当然，我们还为您通常想要重复的键（退格键、del、箭头、home 等）添加了一些例外。

    <!DOCTYPE html>
<html>
<head>
    <title>Evitar caracteres repetidos</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <style>
        #texto {
            width: 100%;
            height: 8em;
        }
    </style>
</head>
<body>
    <textarea id="texto" placeholder="Mantenga presionada una tecla"></textarea>
    <script language="javascript">
        var texto = document.getElementById("texto"),
            excepcionesTeclas = [
                    8,9,13,46,      //backspace tab enter del
                    33,34,35,36,    //PgUp/Dn home end
                    37,38,39,40     //flechas
                ];

        //attachEvent para IE, addEventListener para el resto
        if (texto.attachEvent) texto.attachEvent('onkeydown', noRepetirTeclas);
        else texto.addEventListener('keydown', noRepetirTeclas);

        function noRepetirTeclas(keyboardEvent) {
            //obtener .repeat según navegador
            var repeat;
            if (window.event && 'repeat' in window.event)
                repeat = window.event.repeat;
            else
                repeat = keyboardEvent.repeat;
            //Si se está repitiendo, ignorar
            // excepcionesTeclas deja repetir backspace, flechas, etc.
            if (repeat && !~excepcionesTeclas.indexOf(keyboardEvent.keyCode)) {
                if (keyboardEvent.preventDefault)
                    keyboardEvent.preventDefault();
                else if ('returnValue' in keyboardEvent)
                    keyboardEvent.returnValue = false; //IE
                else
                    return false; //IE viejo
            }
        }
    </script>
</body>
</html>

    * 对于 IE 8 - 必须使用 Array.prototype.IndexOf() 的Polyfill。

    Demo subida a un hosting gratuito

    • 32

  2. 根据布尔变量求解：但是当你写得很快时，你不会写所有东西。我该如何改进它？

    window.onload = function() {

  var pulsado = false,
    input = document.getElementById('input');

  input.addEventListener('keydown', function(e) {
    if (pulsado) e.preventDefault();
    pulsado = true;
  });

  input.addEventListener('keyup', function() {
    pulsado = false;
  });

}
    pulsa una tecla <input type="text" id='input'>

    • 8

  3. 为了解决这个问题，我要做的是检查每个键是否被按下，而不是一个，然后我将字母列表添加到一个对象，设置一个属性，如letras["f"]=true，当键被释放时，它设置为false，这是必要的条件能够再次拧紧。

    由于我们在与@Mariano 聊天，他提供了一种解决方案，只检测字母而不检测Backspace等特殊键。这意味着，由于Backspace这个词有 9 个字符长而不是 1，所以它可以正常工作，而字母可以自定义。

    当按下一个键并且长度为 1 时：

    • 如果之前已按下该键，请避免重复键入，

    • 如果未标记为已按下，则键入该字母，然后将其标记为已按下。

    window.onload = function() {

  var pulsado = false
  var letras={}
  input.addEventListener('keydown',function(e){

    if(letras[e.key]==undefined){letras[e.key]=false}
    if(e.key.length==1)
    {
      if(letras[e.key]){e.preventDefault()}else{letras[e.key]=true}
    }
  })
  input.addEventListener('keyup',function(e){
    letras[e.key]=false
  })
}
    Pulsa una tecla: <input type="text" id='input' />

    • 8

  4. 在这里，我让您的示例正常工作，如果您有任何其他要求，可能需要进行其他修饰。基本上，它是关于正确使用键盘事件，并考虑首先执行哪个事件：

    var texto = document.getElementById("texto");
var pulsado = false;
var tiempo_max = 3000; // Max tiempo de pulsación
var ultima_pulsacion; // Fecha ultima pulsación

// KeyDown
texto.addEventListener('keydown', function(keyboardEvent) {
  // Eliminamos la posición del textarea si estamos en el intervalo de tiempo
  if(Date.now() - ultima_pulsacion < tiempo_max){
    texto.value = texto.value.slice(0, -1);
  }
});

// Key Press
texto.addEventListener('keypress', function(e){
  // Si no hay ultima posición
  if(!ultima_pulsacion){
    ultima_pulsacion = Date.now();
  } else if(Date.now() - ultima_pulsacion > tiempo_max){
    // Si hemos superado el intervalo de tiempo ponemos a null la ultima_pulsacion
    ultima_pulsacion = null;
    //texto.value = texto.value.slice(0, -1);
  }
});

// Key Up
texto.addEventListener('keyup', function(e){
  // ponemos a null la última pulsación 
  ultima_pulsacion = null;
});
    <textarea id="texto"></textarea>

    • 4

  5. 试试这个，添加更多代码来实现结果。

        <script>
            var LetraPulsada=""; // la letra que se introduce
            var textoAnterior=''; // el texto anterior a la ultima tecla introducida
            var timer = 0; // timer para contar el tiempo transcurrido
            var intervalo;  // el intervalo
            var textarea; // area de texto donde se introduce el texto
            window.onload = function () // cuando este lista la pagina agregamos los eventos y los listener
            {
                textarea = document.getElementById("texto"); // hacemos referencia al area de texto
                $("#texto").enterKey(function (e) // hacemos el pequeño plugin enterKey declarado al final de este codigo
                {
                    if (LetraPulsada==e.key && timer>1) // verificamos que la letra sea igual a la ultima introducida y que el tiempo transcurrido sea mayor a 1
                    {
                        console.log('= '+e.key+' '+LetraPulsada);
                        $("#texto").val(textoAnterior); // si es true entonces significa que una tecla se ha introducido seguida de una ultima similar por lo tanto negamos la entrada de la letra e introducimos el ultimo texto de la caja
                        clear(); // por si las dudas reiniciamos el conteo
                    }
                    else
                    { // si false entonces introducimos el texto
                        textoAnterior = $("#texto").val();
                        clear(); // por si las dudas reiniciamos el conteo
                    }
                    LetraPulsada=e.key; // guardamos la ultima letra tecleada para hacer uso de ella en las conparaciones de arriba
                });

                textarea.addEventListener("keypress", function()
                {
                    console.log("keypress"+timer);
//  asignamos valor al intervalo y sumamos el timer cada vez que se cumpla el tiempo especificado
                    intervalo = setInterval(function(){timer += 1;}, 1); // 1000 = 1s
                });

                textarea.addEventListener("keyup", function()
                { // cuando se deje de pulsar la tecla reinicamos el intervalo y el timer
                    console.log("keyup");
                    clearInterval(intervalo);
                    timer = 0;
                });
            };
            function clear() // funcion auxiliar para reinicar conteo
            {
                clearInterval(intervalo);
                timer = 0;
            }

            $.fn.enterKey = function (fnc) // pequeño plugin que reconoce si una tecla fue pulsada y retorna objeto con datos de la tecla pulsada
            {
                return this.each(function ()
                {
                    $(this).keypress(function (ev)
                    {
                        var keycode = (ev.keyCode ? ev.keyCode : ev.which);
                        fnc.call(this, ev);
                    })
                })
            }


        </script>
    <textarea id="texto"></textarea>

    值得一提的是我使用jquery和javascript

    • 0

  6. 您不需要使用所有三个事件，只需重置文本区域，使其始终恢复到开始时的状态。像这样的东西：

    function valida_longitud () {

  let permitido = 0;
  let areaTexto = document.getElementById("texto");

  if (areaTexto.value.length != permitido) {

    areaTexto.value = "";
  }

    在 html 中，您只会告诉它在按下键时做出反应：

          <textarea id="texto" value="" onKeyDown="valida_longitud()"></textarea>

    现在每次文本区域中有更多字母时，它们都不会显示，除了最后一个被按下的字母

    • -1

  7. 我们创建一个变量，当用户按下一个键时，keydown 函数将验证变量的状态，如果是则true取消重复，否则将忽略并成为true变量，当用户释放它时，该变量将成为false.

    这是我的例子：

    	var pulsado = false;
	$("#texto").keydown(function(e){ 
            if(pulsado) return false;
            pulsado = true;
	}).keyup(function(){
            pulsado = false;
		}
	);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="texto"></textarea>

    • -1