• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

X im Input Feld zum löschen

R

_R_A_L_F_

Mitglied
Hallo,

bin auf der Suche wie ich das lösen kann, dass wenn ich in einem Textfeld was Tippe am Ende des Textfeldes ein X angezeigt wird und wenn ich darauf klick der Inhalt des Textfeldes gelöscht wird.

Hab da was gefunden aber so ganz funktioniert es noch nicht:

CSS:
HTML: 
.clearable{
      background-image: url(../images/remove.gif);
      background-repeat: no-repeat;
      background-position: right -50px center;
      transition: background 0.4s;
}
.clearable.x{
    background-position: right 5px center;
}
.clearable.onX{
    cursor: pointer;
}


JS:
HTML: 
    // X löschen im input - Feld
jQuery(function($) {
  function tog(v){return v?'addClass':'removeClass';}
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');  
  }).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
  });
 
 
});

Meine vorhandenen CSS Eigenschaften für das Input Feld:
HTML: 
#anfrage-form input[type=text] {margin-bottom:-2px; font-size:13px; border-radius:3px; border:1px solid #e0e0e0; border-right:1px solid #fbfbfc; border-bottom:1px solid #fbfbfc; color:#696969; padding:5px 16px;outline:none; position:relative; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background:#E9E9E9;}
 
#anfrage-form input[type=text] {width:250px;}


Das Input - Feld:
HTML: 
<form id="anfrage-form"  method="post" ...">
     <fieldset>
    <label for="bereich">Meldebereich</label>
    <label class="text">
    <input type="text" name="meldebereich" id="textfeld1_id" onkeyup="autocomplet_wk_first()" value="<?=$meldebereich;?>"  placeholder="z.B. Aufrollung oder Auf*"></label><ul id="textfeld1_list_id"></ul>
    </fieldset>
....



Wie muss ich das nun CSS mäßig umschreiben, dass die JS Funktion auch bei meinem Beispiel funktioniert?

Für ein Standard Textfeld außerhalb der Form funktioniert es bereits.

Vielen Dank
 
Also bei meinem Test nun liegt es daran das du background überschreibst.
Denn ich vermute mal es geht dir nun darum, dass das X nicht eingeblendet wird.

dem Input feld musst du die class "clearable" geben und bei deinem css das background in background-color ändern.
 
Hallo,
nettes teil ... So etwas habe ich auch schon gesucht. Habe es bei mir auch im Einsatz.

Habe 2 Felder, in das erste kann man einen Text eingeben, im zweiten Taucht dann das Ergebnis auf.

Im ersten wird das x angezeigt und das Feld wird dann auch geleert, hätte es aber gerne das das zweite Feld auch geleert werden soll. Ich weiss da gibt es was in html, aber ich finde des mit dem x besser.

Wie machst du das eigentlich im IE, der zeigt ja auch ein X von sich selber an. Habe zwar schon versucht meins beim IE durch display: none auszublenden, will aber nicht so recht.

Gruß Alex
 
hatte es schon mit if !IE versucht, was auch im IE dann wunderbar funktioniert, aber Firefox macht aber nix ...
 
Ist eigentlich ganz einfach. Anstatt das Input zu adressieren, positioniert man rechts ein Blockelement und stylt es so, dass es visuell zum Input-Feld gehört, und das jQuery Gedöhns braucht man auch nicht.
HTML: 
<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
      form {margin-top: 50px;}
      .foo, .bar {
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        height: 28px;
      }
      .foo {
        border-left: 1px solid #ccc;
        border-right: 0;
        width: 200px;
      }
      .bar {
        border-left: 0;
        border-right: 1px solid #ccc;
        line-height: 28px;
        width: 14px;
      }
      .baz {
        border-right: 1px solid #ccc;
        width: 214px;
      }
      .bar span {cursor: pointer;}
    </style>
  </head>
  <body>
    <form class="container" ng-controller="MyController">
      <div class="clearfix">
        <input type="text" ng-model="input_text" class="foo pull-left">
        <p class="bar pull-left" ng-click="empty_field()"><span ng-show="input_text.length > 0">x</span></p>
      </div>
      <input type="text" ng-model="input_text" class="foo baz">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.js"></script>
    <script>
      angular.module('myApp', [])
        .controller('MyController', ['$scope', function($scope){
          $scope.input_text = '';
          $scope.empty_field = function() {
            $scope.input_text = '';
          };
        }]);
    </script>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben