Wie Sie die Taste deaktivieren, wenn das Textfeld leer ist?

Question

Ich muss Textbox aktivieren, wenn der Benutzer beginnt, auf es zu drucken, Ende Schaltfläche deaktivieren, wenn das Textfeld leer ist.

hier ist mein Textfeld und Schaltfläche:

<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
    <input type="text" id="newLayerName" placeholder="name" value="" /> 

Hier ist der Code, den ich benutze:

function setElementsDisabled() { 
    $('#newLayerName').keyup(function() { 
     if ($(this).val().length != 0) 
      $('#btnSaveLayer').attr('disabled', false); 
     else 
      $('#btnSaveLayer').attr('disabled', true); 
    }) 
} 

Aus-Funktion oben Sie können sehen, dass, wenn der Benutzer Text in Text eingeben starten Box Butten aktiviert und wenn der Benutzer von Textfeld Schaltfläche entfernen deaktiviert.

Und es funktioniert perfekt !!!

Aber wenn ich klar Taste programmatisch diesen jquery Code verwendet:

$("#newLayerName").val(''); 

Der Text von Textfeld entfernt wird, aber wird Taste nicht deaktiviert.

Jede Idee, wie meine Funktion ändern setElementsDisabled so, dass, wenn Textfeld auf die Schaltfläche leer ist deaktiviert? Hier

Answer 1

versuchen Sie die Verwendung $('#newLayerName').trigger("keyup") zu erreichen, was Sie wollen. Beispiel unten.

function setElementsDisabled() { 
 
    $('#newLayerName').keyup(function() { 
 
     $('#btnSaveLayer').prop('disabled', $(this).val().length == 0); 
 
    }) 
 
} 
 
setElementsDisabled() 
 

 
$("#clear").click(function() { 
 
    $("#newLayerName").val('').trigger("keyup"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
 
<input type="text" id="newLayerName" placeholder="name" value="" /> 
 

 
<button id="clear"> clear</button>

Answer 2

ist das Skript

$("#newLayerName").keyup(function(e){ 
 
    check($(this)); 
 
}) 
 

 
$("#newLayerName").change(function(){ 
 
    check($("#newLayerName")); 
 
}) 
 

 
function check(obj){ 
 
    if($(obj).val().length==0){ 
 
    $("#btnSaveLayer").prop("disabled",true); 
 
    } 
 
    else{ 
 
    $("#btnSaveLayer").prop("disabled",false); 
 
    } 
 
} 
 
$("#newLayerName").val("Hello"); 
 

 
check($("#newLayerName")); 
 

 
setTimeout(function(){ 
 
$("#newLayerName").val("").change(); 
 
},3000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
 
    <input type="text" id="newLayerName" placeholder="name" value="" />

Answer 3

können Sie hinzufügen, um dieses

if ($('#newLayerName').val().length != 0) 
       $('#btnSaveLayer').attr('disabled', false); 
      else 
       $('#btnSaveLayer').attr('disabled', true); 

in einer separaten Funktion und rufen Sie die gleiche Methode programmatisch, wenn Sie das Textfeld räumen

Answer 4

können Sie manuell eine keyup Ereignis auslösen, und auch optimieren stark diesen Code (Cache-Tasten, Einzeiler disabled Logik, die Verwendung von prop statt attr, den Wert der Veranstaltung Lesen statt Aufbau eines $(this) Objekt, etc.):

const $btnSaveLayer = $('#btnSaveLayer'), 
 
\t $newLayerName = $("#newLayerName") 
 

 
$('#newLayerName').keyup(e => { 
 
    $btnSaveLayer.prop('disabled', !e.target.value.length); 
 
}) 
 

 
$("#clearBtn").click(() => { 
 
\t $newLayerName.val('').trigger("keyup"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
 
    <input type="text" id="newLayerName" placeholder="name" value="" /> 
 
<button id="clearBtn">Clear</button>

Answer 5

Wenn Sie stattdessen programmgesteuert $("#newLayerName").val(''); aufrufen, können Sie $("#newLayerName").val('').keyup(); anrufen. Trigger keyup Ereignis nach klaren Daten.

$("#newLayerName").keyup(function(e){ 
 
    if($(this).val().length==0){ 
 
    $("#btnSaveLayer").prop("disabled",true); 
 
    } 
 
    else{ 
 
    $("#btnSaveLayer").prop("disabled",false); 
 
    } 
 
}) 
 

 
function programaticallyClear() { 
 
$("#newLayerName").val('').keyup(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
 
    <input type="text" id="newLayerName" placeholder="name" value="" /> 
 

 
<button id="programaticallyClearButton" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="programaticallyClear()" >programaticallyClearButton</button>

Answer 6

1. Wir brauchen keyup Ereignis auf dem Eingangselement verwenden.
2. Wir müssen den eingegebenen Wert überprüfen.Räume sollten nicht erlaubt sein (offensichtlich)
3. Veranstaltung wird sich auf clear auf Klick abgefeuert werden und wird die gleiche keyup Trigger

$('#newLayerName').on('keyup', function() { 
 
    $('#btnSaveLayer').prop('disabled', $.trim($(this).val()).length == 0); 
 
}); 
 

 
$("#clear").click(function() { 
 
    $("#newLayerName").val('').trigger("keyup"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSaveLayer" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b" onclick="SaveNewLayer()" disabled>save</button> 
 
<input type="text" id="newLayerName" placeholder="name" value="" /> 
 

 
<button id="clear"> clear</button>