Autor |
Nachricht |
Need_you
Threadersteller
Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.12.2011 09:21
Titel JS: Eingabefeld löschen Button |
|
|
Ich bin auf der Suche nach einem Script, welches bei einer Texteingabe in einer Suchbox, einen grafischen Button in eben dieser einblendet, um die Eingabe rückgängig zu machen. Bekannt vor allem bei Apple Software:
Kann mir da einer eine Seite nennen, wo dies erklärt wird? Habe Google schon mit allen möglichen, mir einfallenden Suchbegriffen bombardiert, konnte aber bis jetzt noch nichts entsprechendes finden.
Wenn es geht bitte o h n e jQuery. Da lern ich ja nichts draus
|
|
|
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 12.12.2011 09:34
Titel
|
|
|
Ohne JavaScript wirst du aber die Eingabe beim Klick auf das "X" nicht löschen können.
|
|
|
|
|
Anzeige
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Mo 12.12.2011 09:37
Titel
|
|
|
DesignKater hat geschrieben: | Ohne JavaScript wirst du aber die Eingabe beim Klick auf das "X" nicht löschen können. |
Er hat ja auch nicht gesagt "ohne javascript" sondern nur "kein jquery"
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 12.12.2011 09:47
Titel
|
|
|
Bitteschön:
Code: | <html>
<head>
<title>Reset button</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#search-form {
position:relative;
}
#search-term {
width: 200px;
}
#search-reset {
position: absolute;
top: 2px;
left: 180px;
width: 20px;
background: grey;
color: #fff;
text-align: center;
display: none;
}
</style>
<script type="text/javascript">
// shortcut
var $ = function(id){
return document.getElementById(id);
};
window.onload = function(){
$('search-term').onkeyup = function(){
if (this.value != '') $('search-reset').style.display = 'block';
}
$('search-term').onblur = function(){
if (this.value == '') $('search-reset').style.display = 'none';
}
$('search-reset').onclick = function(){
$('search-term').value = '';
$('search-reset').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="" method="post" id="search-form">
<input type="text" name="q" value="" id="search-term" />
<a href="javascript:void(0);" id="search-reset">x</a>
</form>
</body>
</html>
|
Grüße
zweitaccount
|
|
|
|
|
Need_you
Threadersteller
Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.12.2011 10:40
Titel
|
|
|
@zweitaccount: Super, vielen Dank schonmal! Selbstgeschrieben?
Hab da nur ein paar Probleme bei, die ich nicht zu lösen weiß.
1. Wenn man etwas eingegeben hat, und dann auf das löschen Icon klickt, dann ist auch der Cursor nicht mehr im Inputfeld, und ich kann nicht direkt weiterschreiben.
2. Wenn ich etwas eingebe, und dann gewohnt mit der Delete-Taste der Tastatur die Eingabe lösche, bleibt das Icon ebenfalls da stehen.
Hier ein Beispiel wie ich es bei mir gerne implementieren möchte:
http://computerbase.mobi/suche/
Leider ist das auch mit jQuery gemacht wurden, und da ich mich nicht damit auskenne, war es mir auch nicht möglich den Code, der für exakt diese Funktion nötig ist aus der jQuery Datei zu fischen.
Habe dann sowieso lieber Code der was länger ist, und denn ich dann auch besser nachvollziehen kann.
|
|
|
|
|
buddha-brot
Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht:
|
Verfasst Mo 12.12.2011 11:10
Titel
|
|
|
Ersetze
Code: | $('search-term').onkeyup = function(){
if (this.value != '') {
$('search-reset').style.display = 'block';
} else {
$('search-reset').style.display = 'none';
}
}
$('search-reset').onclick = function(){
$('search-term').value = '';
$('search-reset').style.display = 'none';
$('search-term').focus();
}
|
|
|
|
|
|
Need_you
Threadersteller
Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.12.2011 11:32
Titel
|
|
|
Ich liebe euch zwei!! xD Vielen Dank, funktioniert 1A.
Seit ihr so versiert in JavaScript, dass ich euch gegen Bares mal Code von mir geben kann, und ihr (wer auch immer von euch sich das zutraut), diesen valide macht, schön ordnet und mit Kommentaren verseht? Habe manches was ich verwende nämlich aus open Source Code-Quellen, soweit wie ich in der Lage war rausgeschnitten, und es funktioniert auch Prima. Jedoch weiß ich nicht was es mit den Zeilen auf sich hat Evtl. können diese auch weiter vereinfacht werden.
Würde gerne mal wissen wer von euch sich da fit drin fühlt, das zu machen =) Wenn ich das in der Job-Börse reinstell schreiben mich ansonsten auch nur Kids an, die eigentlich nicht mehr Ahnung haben als ich...
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 12.12.2011 12:46
Titel
|
|
|
DesignKater hat geschrieben: | Ohne JavaScript wirst du aber die Eingabe beim Klick auf das "X" nicht löschen können. |
Klar:
Code: | <form method="post" action="">
<fieldset>
<input type="text" />
<input type="reset" />
</fieldset>
</form> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
Textvorgabe im Eingabefeld löschen
Abfrage bei Eingabefeld
Eingabefeld mit nur einer möglichen Lösung
Formular Optionsschaltfläche in Kombination mit Eingabefeld?
Formular Eingabefeld mit runden Ecken???
Suchformular- Absendebutton direkt im Eingabefeld platzieren
|
|