Bagaimana cara saya meletakkan tombol yang jelas di dalam kotak input teks HTML saya seperti iPhone?

131

Saya ingin memiliki ikon kecil yang bagus, ketika diklik akan menghapus teks di kotak <INPUT>.

Ini untuk menghemat ruang daripada memiliki tautan yang jelas di luar kotak input.

Keterampilan CSS saya lemah ... Berikut ini adalah tangkapan layar foto tampilan iPhone.

javascript iphone html css Hugh Buchanan
sumber

Jawaban:

93

@ thebluefox telah merangkum yang paling penting. Anda juga terpaksa menggunakan JavaScript untuk membuat tombol itu berfungsi. Berikut ini SSCCE, Anda dapat menyalin 'tidak' tempel '

<!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>

Contoh langsung di sini .

jQuery adalah dengan cara tidak diperlukan, itu hanya baik memisahkan logika yang diperlukan untuk peningkatan progresif dari sumber, tentunya Anda bisa juga pergi ke depan dengan polos 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>

Anda hanya berakhir dengan HTML yang jelek (dan JS yang kompatibel dengan crossbrowser;)).

Perhatikan bahwa ketika tampilan UI bukan rasa utama Anda, tetapi fungsinya, maka gunakan <input type="search">saja <input type="text">. Ini akan menampilkan tombol hapus (khusus browser) di browser yang mendukung HTML5.

BalusC
sumber
7
mungkin untuk membuat tombol hapus disembunyikan ketika bidang teks kosong?
root
Di IE9 teks mengapung di bawah ikon silang.
sedovav
karena tema berubah, url untuk gambar tidak lagi benar. gambar lama dapat diakses di web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
Anda juga dapat menggunakan ikon font-mengagumkan dengan class="fa fa-remove"pada rentang bagian dalam untuk menampilkan ikon silang yang bagus
singe3
Saya menggunakan versi Javascript murni dan bekerja dengan baik, kecuali untuk memusatkan tombol pada Win / Linux Firefox / Chrome. Saya memecahkannya dengan menghapus top:rentang anak dan pengaturan display: flex; align-items: center;dalam rentang induk.
thomasa88
157

Saat ini dengan HTML5, sangat sederhana:

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

Sebagian besar browser modern akan secara otomatis membuat tombol hapus yang dapat digunakan di lapangan secara default.

bidang input pencarian HTML5 biasa

(Jika Anda menggunakan Bootstrap, Anda harus menambahkan override ke file css Anda untuk membuatnya ditampilkan)

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

bidang input pencarian bootstrap

Browser Safari / WebKit juga dapat memberikan fitur tambahan saat menggunakan type="search", menyukai results=5dan autosave="...", tetapi mereka juga menimpa banyak gaya Anda (misalnya tinggi, batas). Untuk mencegah penggantian tersebut, sambil tetap mempertahankan fungsi seperti tombol X, Anda dapat menambahkan ini ke css Anda:

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

Lihat css-tricks.com untuk info lebih lanjut tentang fitur yang disediakan oleh type="search".

Nick Sweeting
sumber
3
Jawaban yang sangat baik, tidak ada kode yang terlibat. Sayangnya tidak didukung oleh banyak browser .. Nevermind, akan menjadi fitur tambahan Chrome di produk saya :)
guillaumepotier
49

HTML5 memperkenalkan tipe input 'pencarian' yang saya yakini melakukan apa yang Anda inginkan.

<input type="search" />

Ini contoh nyata .

ThorSummoner
sumber
4
Meskipun jenis 'pencarian' didukung oleh semua browser terbaru (periksa dukungan di sini: wufoo.com/html5), tombol hapus tidak ditampilkan di Firefox (32.0.3) atau Opera (12.17).
justanotherprogrammer
9
tombol hapus juga tidak ditampilkan di Chrome terbaru
tsayen
3
Jika Anda menggunakan Bootstrap, itu mungkin mengesampingkan perilaku default
aexl
CodePen yang tertaut tidak memiliki slash penutup pada input, jadi jika Anda ingin melihatnya berfungsi pada CodePen, tambahkan saja slash penutup.
Gen1-1
@ Gen1-1 oops, sepertinya unggahan publik dinonaktifkan blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed jika ada yang memiliki pena kode tetap, silakan mengedit dan membantu memperbaiki demo
ThorSummoner
24

Lihat plugin jQuery-ClearSearch kami . Ini adalah plugin jQuery yang dapat dikonfigurasi - mengadaptasinya sesuai kebutuhan Anda dengan menata bidang input secara langsung. Cukup gunakan sebagai berikut:

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

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

Contoh: http://jsfiddle.net/wldaunfr/FERw3/

wldaunfr
sumber
Ini luar biasa, tapi saya sarankan menambahkan "$ (window) .resize (function () {triggerBtn ()});" di jquery.clearsearch.js, tepat setelah $ this.on ('keyup keydown change focus', triggerBtn); | Sehingga mengubah ukuran jendela tidak akan mengacaukan posisi salib
Ng Sek Long
17

Anda tidak dapat benar-benar memasukkannya ke dalam kotak teks, hanya membuatnya seperti di dalamnya, yang sayangnya berarti beberapa css diperlukan: P

Teori membungkus input dalam sebuah div, mengambil semua batas dan latar belakang dari input, kemudian gaya div hingga terlihat seperti kotak. Kemudian, masukkan tombol Anda setelah kotak input dalam kode dan pekerjaan yang baik.

Setelah Anda membuatnya berfungsi;)

Tom
sumber
6

Saya mendapat solusi kreatif yang saya pikir Anda cari 

$('#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>
Luaskan cuplikan

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

Mahmoud Ali Kassem
sumber
3

Tentu saja pendekatan terbaik adalah menggunakan yang semakin didukung <input type="search" />.

Pokoknya untuk sedikit bersenang-senang pengkodean saya pikir itu bisa dicapai juga menggunakan tombol reset formulir, dan ini adalah hasil kerja (layak dicatat bahwa tidak dapat hidup input lain tetapi bidang pencarian dengan pendekatan ini, atau tombol reset akan menghapus mereka juga), tidak perlu javascript:

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>
Luaskan cuplikan

TechNyquist
sumber
1

Mungkin solusi sederhana ini dapat membantu:

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

Mehran Shagerdi
sumber
Meskipun kode ini dapat memberikan solusi untuk masalah OP, sangat disarankan agar Anda memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan. Jawaban hanya kode biasanya menjadi tidak berguna dalam jangka panjang karena pemirsa masa depan yang mengalami masalah serupa tidak dapat memahami alasan di balik solusi.
E. Zeytinci
-1

@Mahmoud Ali Kaseem

Saya baru saja mengubah beberapa CSS agar terlihat berbeda dan menambahkan fokus ();

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>
Luaskan cuplikan

Hiren
sumber