2016-04-06 7 views
-3

Ich habe ein Formular mit Textfeld und eine Schaltfläche wie folgt:Schließen-Schaltfläche zum Löschen des Text

<input name="search" type="text" /> 
    <button class="close" id="markclick" style="position:absolute"></button> 

<script> 
$('#markclick').click(function() 
{ 

$('.name').val(''); 
} 
</script> 

, wenn ich auf die Schaltfläche klicken, wird das Löschen des Textbox aber eine Sache ist, wie aktiviere ich den Knopf nur beim Eingeben eines Textes in ein Textfeld? Irgendwelche Eingaben dazu?

+2

'$ ('name ')' ==> '$ ('[name = "search"]')' – Tushar

+0

https://jsfiddle.net/n0cfdxup/8 / –

Antwort

1

Dies sollte funktionieren, auch wenn der Benutzer Text in das Eingabefeld einfügt.

Link to fiddle

$(document).ready(function() { 
 
    $('#searchBox').on("change keyup paste", function() { 
 
    $('.close').toggle($('#searchBox').val() != ''); 
 
    }); 
 

 
    $('#markClick').click(function() { 
 
    $('#searchBox').val('').trigger('change'); 
 
    }); 
 
})
.close { 
 
    position: absolute; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input id="searchBox" name="search" type="text" /> 
 
<button class="close" id="markClick">X</button>

0
$('[name=search]').on('keyup',function(){ 
    ($('[name=search]').val().trim().length == 0)? 
    $('#markclick').attr('disabled','disabled') : 
    $('#markclick').removeAttr('disabled'); 
}).trigger('keyup'); 


$('#markclick').on('click',function(){ 
    $('[name=search]').val('').trigger('keyup'); 
}); 

https://jsfiddle.net/p666ncoe/1/

0

Verwenden .toggle mit der display Eigenschaft des Elements und input Ereignisse spielen Änderung des Eingangswert zu handhaben.

.toggle(Boolean) Anzeigen oder Ausblenden der übereinstimmenden Elemente.


Die Veranstaltung DOM input synchron ausgelöst, wenn der Wert eines <input> oder <textarea> Element geändert wird [Ref]

. Hinweis:button sollte display:none zunächst sein. oder verwenden Sie .trigger('input'), um den Handler input aufzurufen.

$('[name="search"]').on('input', function() { 
 
    $('#markclick').toggle(!!this.value); //return true if value!='' 
 
}); 
 
$('#markclick').on('click', function() { 
 
    $('[name="search"]').val(''); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input name="search" type="text" /> 
 
<br> 
 
<button class="close" id="markclick" style="position:absolute;display:none">Clear</button>

Verwandte Themen