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.
Jawaban:
@ 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>
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.
class="fa fa-remove"pada rentang bagian dalam untuk menampilkan ikon silang yang bagus
top:rentang anak dan pengaturan display: flex; align-items: center;dalam rentang induk.
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.
(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;
}
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".
HTML5 memperkenalkan tipe input 'pencarian' yang saya yakini melakukan apa yang Anda inginkan.
<input type="search" />
Ini contoh nyata .
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>
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;)
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>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>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>@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>