Jak umieścić wyraźny przycisk w polu wprowadzania tekstu HTML, tak jak robi to iPhone?

133

Chcę mieć ładną małą ikonę, która po kliknięciu wyczyści tekst w polu <INPUT>.

Ma to na celu zaoszczędzenie miejsca zamiast posiadania wyraźnego łącza poza polem wprowadzania.

Moje umiejętności CSS są słabe ... Oto zrzut ekranu przedstawiający wygląd iPhone'a.

javascript iphone html css Hugh Buchanan
źródło

Odpowiedzi:

93

@thebluefox podsumował najbardziej ze wszystkich. Jesteś także zmuszony do używania JavaScript tylko po to, aby ten przycisk i tak działał. Oto SSCCE, możesz skopiować i wkleić i uruchomić:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Przykład na żywo tutaj .

Nawiasem mówiąc, jQuery nie jest konieczne, po prostu ładnie oddziela logikę potrzebną do stopniowego ulepszania od źródła, możesz oczywiście również przejść do zwykłego HTML / CSS / JS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

W efekcie otrzymujesz tylko brzydszy HTML (i niekompatybilny z różnymi przeglądarkami JS;)).

Zwróć uwagę, że jeśli wygląd interfejsu użytkownika nie jest Twoim największym zmartwieniem, ale funkcjonalność jest taka, po prostu użyj <input type="search">zamiast <input type="text">. W przeglądarkach obsługujących HTML5 wyświetli się przycisk Clear (specyficzny dla przeglądarki).

BalusC
źródło
7
można ukryć przycisk Clear, gdy pole tekstowe jest puste?
zrootuj
W IE9 tekst pływa pod ikoną krzyżyka.
sedovav
od czasu zmiany motywu adres URL obrazu nie jest już poprawny. stary obraz jest dostępny pod adresem web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
Możesz także użyć niesamowitych ikon z czcionką class="fa fa-remove"na wewnętrznej rozpiętości, aby wyświetlić ładną ikonę krzyżyka
singe3
Użyłem czystej wersji Javascript i działało dobrze, z wyjątkiem wyśrodkowania przycisku na Win / Linux Firefox / Chrome. Rozwiązałem to, usuwając top:zakres podrzędny i ustawiając display: flex; align-items: center;zakres nadrzędny.
thomasa88
167

W dzisiejszych czasach w HTML5 jest to całkiem proste:

<input type="search" placeholder="Search..."/>

Większość nowoczesnych przeglądarek domyślnie automatycznie renderuje użyteczny przycisk w polu.

zwykłe pole wejściowe wyszukiwania HTML5

(Jeśli używasz Bootstrap, musisz dodać przesłonięcie do swojego pliku css, aby był widoczny)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

pole wejściowe wyszukiwania bootstrap

Przeglądarki Safari / WebKit mogą również zapewniać dodatkowe funkcje podczas używania type="search", jak results=5i autosave="...", ale także zastępują wiele twoich stylów (np. Wysokość, obramowanie). Aby zapobiec tym nadpisaniom, zachowując jednocześnie funkcjonalność, taką jak przycisk X, możesz dodać to do swojego css:

input[type=search] {
    -webkit-appearance: none;
}

Zobacz css-tricks.com, aby uzyskać więcej informacji o funkcjach udostępnianych przez type="search".

Nick Sweeting
źródło
3
Doskonała odpowiedź, bez kodu. Niestety nie jest obsługiwany przez wiele przeglądarek .. Nieważne, byłaby to dodatkowa funkcja Chrome w moim produkcie :)
guillaumepotier
51

HTML5 wprowadza typ wprowadzania „wyszukiwania”, który moim zdaniem robi to, co chcesz.

<input type="search" />

Oto przykład na żywo .

ThorSummoner
źródło
4
Chociaż typ „wyszukiwania” jest obsługiwany przez wszystkie najnowsze przeglądarki (sprawdź wsparcie tutaj: wufoo.com/html5), przycisk czyszczenia nie jest wyświetlany w przeglądarce Firefox (32.0.3) ani Opera (12.17).
justanotherprogrammer
9
przycisk czyszczenia również nie jest wyświetlany w najnowszym Chrome
tsayen
4
Jeśli używasz Bootstrap, może
aexl
W połączonym CodePen brakuje zamykającego ukośnika w danych wejściowych, więc jeśli chcesz zobaczyć, jak działa na CodePen, po prostu dodaj zamykający ukośnik.
Gen1-1
@ Gen1-1 oops, wygląda jak przesłanych publicznych są wyłączone blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed jeśli ktoś ma stałe pióra kod, prosimy o edycji i pomaga skorygować demo
ThorSummoner
24

Sprawdź naszą wtyczkę jQuery-ClearSearch . Jest to konfigurowalna wtyczka jQuery - dostosowanie jej do własnych potrzeb poprzez stylizację pola wejściowego jest proste. Po prostu użyj go w następujący sposób:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

Przykład: http://jsfiddle.net/wldaunfr/FERw3/

wldaunfr
źródło
To jest niesamowite, ale radziłbym dodać "$ (window) .resize (function () {triggerBtn ()});" w jquery.clearsearch.js, zaraz po $ this.on ('keyup keydown change focus', triggerBtn); | Aby okna zmiany rozmiaru nie zepsuły pozycji krzyżowej
Ng Sek Long
17

Nie możesz niestety umieścić go w polu tekstowym, tylko sprawić, by wyglądał tak, jak jest w środku, co niestety oznacza, że ​​potrzebny jest jakiś css: P

Teoria polega na zawinięciu danych wejściowych w element div, usunięciu wszystkich krawędzi i tła z danych wejściowych, a następnie nadaniu mu stylu, aby wyglądał jak prostokąt. Następnie umieść przycisk za polem wprowadzania w kodzie, a zadania będą dobre.

Kiedy już i tak będziesz mieć to do pracy;)

Tomek
źródło
6

Mam kreatywne rozwiązanie, którego chyba szukasz 

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>
Rozwiń fragment

https://jsfiddle.net/qdesign/xn9eogmx/1/

Mahmoud Ali Kassem
źródło
3

Oczywiście najlepszym podejściem jest użycie coraz bardziej obsługiwanego <input type="search" />.

Zresztą dla odrobiny zabawy z kodowaniem pomyślałem, że można to osiągnąć również za pomocą przycisku resetowania formularza i to jest efekt pracy (warto zauważyć, że inne wejścia nie mogą żyć, ale pole wyszukiwania przy takim podejściu lub przycisk resetowania się skasuje je też), javascript nie jest potrzebny:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>
Rozwiń fragment

TechNyquist
źródło
1

Może to proste rozwiązanie pomoże:

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
Rozwiń fragment

Mehran Shagerdi
źródło
Chociaż ten kod może stanowić rozwiązanie problemu OP, zdecydowanie zaleca się podanie dodatkowego kontekstu wyjaśniającego, dlaczego i / lub jak ten kod odpowiada na pytanie. Odpowiedzi zawierające tylko kod zazwyczaj stają się bezużyteczne na dłuższą metę, ponieważ przyszli widzowie doświadczający podobnych problemów nie mogą zrozumieć przyczyny rozwiązania.
E. Zeytinci
0

To takie proste w HTML5

<input type="search">

To wykona twoją pracę!

Mohammed Mansoor
źródło
-1

@Mahmoud Ali Kaseem

Właśnie zmieniłem trochę CSS, aby wyglądał inaczej i dodałem focus ();

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>
Rozwiń fragment

Hiren
źródło