Quiero validar un campo de entrada con expresiones regulares (reemplazando todas las vocales). La entrada siempre debe coincidir con esa expresión regular, independientemente de si se escribe o pega en ese campo.
Sé cómo lidiar con la parte de escritura, pero necesito ayuda para copiar y pegar. Se deben omitir todas las vocales (eg: "abcde" copy --> "bcd" paste)
$('document').ready(function(){ var pattern = /[aeiou]/ig; $("#input").on("keypress keydown", function (e) { if (e.key.match(pattern) !== null) { e.preventDefault(); } }); $("#input").on("paste", function (e) { var text = e.originalEvent.clipboardData.getData('Text'); e.preventDefault(); //TODO... replace all vowels console.log(text); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='input'/> Al principio traté de reemplazarlos y simplemente establecí el valor con $('#input').val($('#input').val() + copiedValue) , pero esto solo funciona si el cursor está al final de la entrada
Una solución única se suscribe al evento de input . Además de las tareas de desinfección, el controlador debe encargarse de restablecer los campos de entrada en la posición exacta o más esperada del cursor/marca de intercalación para no interrumpir la experiencia del usuario...
function getSanitizedValue(value) { return value.replace(/[aeiou]/ig, ''); } function handleInput(evt) { evt.preventDefault(); const elmNode = evt.currentTarget; const currentValue = elmNode.value; const sanitizedValue = getSanitizedValue(currentValue); if (currentValue !== sanitizedValue) { const diff = sanitizedValue.length - currentValue.length; const { selectionStart, selectionEnd } = elmNode; elmNode.value = sanitizedValue; elmNode.selectionStart = (selectionStart + diff > 0) ? selectionStart + diff : selectionStart; elmNode.selectionEnd = (selectionEnd + diff > 0) ? selectionEnd + diff : selectionEnd; } } $('document') .ready(() => { $("#input").on("input", handleInput); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='input'/>Un método sería manipular el valor del campo de texto del evento de paste :
$('document').ready(function(){ var pattern = /[aeiou]/ig; $("#input").on("keypress keydown", function (e) { if (e.key.length == 1 && !e.ctrlKey && !e.altKey && e.key.match(pattern) !== null) { e.preventDefault() } }); $("#input").on("paste", function (e) { var text = e.originalEvent.clipboardData.getData('Text').replace(pattern, ""); e.preventDefault(); let input = e.originalEvent.target, start = input.selectionStart, end = input.selectionEnd; input.value = input.value.substr(0, start) + text + input.value.substr(end); input.selectionStart = start + text.length; input.selectionEnd = input.selectionStart; //TODO... replace all vowels console.log(text, input.value); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='text' id='input'/>