¿Cómo evitar que un elemento de entrada (texto, área de texto, selección, botón de opción, casilla de verificación) obtenga el foco? Básicamente, quiero deshabilitarlos sin cambiar el atributo deshabilitado o de solo lectura, pero negándoles el enfoque. ¿Existe una manera clara de escanear el DOM usando ciertos criterios de búsqueda y aplicarlos al resultado de la búsqueda? ¡Digamos que quiero encontrar todas las entradas que no están etiquetadas con una determinada clase CSS y hacerlas no seleccionables!
Proporcione los elementos que deben permitirse enfocar la clase de focus . Luego use un controlador de eventos de focus que desenfoca el elemento.
$(document).on("focus", ":input:not(.focus)", function() { $(this).blur(); console.log("Focus blocked"); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox"> No focus<br> <input type="checkbox" class="focus"> Focus Esto utiliza la delegación de eventos para que pueda agregar y eliminar la clase de focus dinámicamente.
No estoy seguro de si entendí lo que quieres decir, pero ¿puedes ejecutar esto?
$('#disabler').change(function() { resetFields(); var this_value = $(this).val(); if(this_value != 'none'){ $('.'+this_value).attr('disabled', true); } }); $('.disabler').click(function(){ resetFields(); var this_value = $(this).attr('id'); $('.'+this_value).attr('disabled', true); }); $('#reset').click(function(){ resetFields(); }); function resetFields() { $('.first, .second').removeAttr('disabled'); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="first" value="A"><br/> <select class="first"><option value="1">A</option></select><br/> <textarea class="first" col="2" row="10">A</textarea><br/> <br/><br/> <input class="second" value="B"><br/> <select class="second"><option value="1">B</option></select><br/> <textarea class="second" col="2" row="10">B</textarea><br/> <br/><br/> <select id="disabler"> <option value="none">-select-</option> <option value="first">Disable first</option> <option value="second">Disable second</option> </select><br/> <button id="first" class="disabler">Disable first only</button><br/> <button id="second" class="disabler">Disable second only</button><br/> <button id="reset">Reset</button>