Quiero deshabilitar mi botón de envío si el usuario ingresa espacios vacíos en el campo de entrada. No quiero un campo de entrada vacío con solo espacios que muestren el botón Enviar habilitado.
$("#edit-title-input").on("keyup", stateHandle); function stateHandle(e) { // console.log({a:$("#title").text(),b:e.target.value}); if ($("#title").text() == e.target.value || input.value.length == 0) { $('#edit-submit').prop('disabled', true); } else { $('#edit-submit').prop('disabled', false); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="edit-title-input"><br> <button id="edit-submit">Submit</button> Puede llamar a trim() en una cadena para eliminar el espacio vacío antes y después.
Ver fragmento con el código modificado:
$("#edit-title-input").on("keyup", stateHandle); function stateHandle(e) { console.log('input value vs. input value.trim()', '"' + e.target.value + '"', '"' + e.target.value.trim() + '"'); if ($("#title").text() == e.target.value || e.target.value.trim().length == 0) { $('#edit-submit').prop('disabled', true); } else { $('#edit-submit').prop('disabled', false); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="edit-title-input"><br> <button id="edit-submit">Submit</button> $("#input1").on("keyup", function(e) { if (e.target.value.replace(/\s/g, '').length == 0 ) { $('#submit').prop('disabled', true); } else { $('#submit').prop('disabled', false); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="input1"><br> <button id="submit">Submit</button>Una forma sería usar expresiones regulares para eliminar espacios. luego verifique si el valor de esa cadena sigue siendo 0 o no. De forma predeterminada, debe deshabilitar el botón. disabled es un atributo vacío que no tiene valor. Por lo tanto, cambiarlo de verdadero a falso no tiene ningún efecto ya que el atributo aún está presente.
$('#edit-title-input').on('keyup', stateHandle); function stateHandle(e) { var text = $('#edit-title-input').val(); var regex = text.replace(/ /g,''); if (regex.length == 0) { $('#edit-submit').attr('disabled', true); } else { $('#edit-submit').removeAttr('disabled'); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="edit-title-input"><br> <button id="edit-submit" disabled>Submit</button>