mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 15.06.2021 15:29 Benutzername: Passwort: Auto-Login

Thema: JS: Eingabefeld löschen Button vom 12.12.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> JS: Eingabefeld löschen Button
Seite: 1, 2  Weiter
Autor Nachricht
Need_you
Threadersteller

Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 12.12.2011 10:21
Titel

JS: Eingabefeld löschen Button

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 12.12.2011 10:34
Titel

Antworten mit Zitat Zum Seitenanfang

Ohne JavaScript wirst du aber die Eingabe beim Klick auf das "X" nicht löschen können.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Alex

Dabei seit: 29.11.2005
Ort: Dortmund
Alter: 34
Geschlecht: Männlich
Verfasst Mo 12.12.2011 10:37
Titel

Antworten mit Zitat Zum Seitenanfang

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" *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 12.12.2011 10:47
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Need_you
Threadersteller

Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 12.12.2011 11:40
Titel

Antworten mit Zitat Zum Seitenanfang

@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.
  View user's profile Private Nachricht senden
buddha-brot

Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht: Männlich
Verfasst Mo 12.12.2011 12:10
Titel

Antworten mit Zitat Zum Seitenanfang

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();
            }
  View user's profile Private Nachricht senden
Need_you
Threadersteller

Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 12.12.2011 12:32
Titel

Antworten mit Zitat Zum Seitenanfang

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 * Wo bin ich? * 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...
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 12.12.2011 13:46
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Textvorgabe im Eingabefeld löschen
Abfrage bei Eingabefeld
Wie bekomme ich mein Logo in das Eingabefeld des Browsers...
Formular Eingabefeld mit runden Ecken???
Formular Optionsschaltfläche in Kombination mit Eingabefeld?
Eingabefeld mit nur einer möglichen Lösung
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.