Tıklandığında <INPUT> kutusundaki metni temizleyecek güzel bir küçük simgeye sahip olmak istiyorum.
Bu, giriş kutusunun dışında net bir bağlantıya sahip olmak yerine yerden tasarruf sağlamak içindir.
CSS becerilerim zayıf ... İşte iPhone'un nasıl göründüğüne dair bir ekran görüntüsü .
Yanıtlar:
@thebluefox en çok özetledi. Yine de bu düğmeyi çalıştırmak için JavaScript kullanmak zorunda kalıyorsunuz. İşte bir SSCCE, onu kopyalayıp ve yapıştırabilirsin:
<!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 bu arada gerekli değil, aşamalı geliştirme için gerekli mantığı kaynaktan güzel bir şekilde ayırıyor, tabii ki düz HTML / CSS / JS ile de devam edebilirsiniz :
<!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>Yalnızca daha çirkin HTML (ve tarayıcılar arası uyumlu olmayan JS;) ile sonuçlanırsınız.
En büyük endişeniz UI görünümü değil, ancak işlevsellik olduğunda, <input type="search">bunun yerine sadece kullanın <input type="text">. HTML5 özellikli tarayıcılarda (tarayıcıya özgü) temizle düğmesi gösterilecektir.
class="fa fa-remove"Güzel bir çarpı simgesi görüntülemek için iç aralıkta bulunan harika font simgelerini de kullanabilirsiniz
top:, child span'ı kaldırarak display: flex; align-items: center;ve ebeveyn aralığını ayarlayarak çözdüm.
Günümüzde HTML5 ile oldukça basit:
<input type="search" placeholder="Search..."/>Çoğu modern tarayıcı, varsayılan olarak alanda kullanılabilir bir temiz düğmeyi otomatik olarak oluşturur.
(Bootstrap kullanıyorsanız, gösterilmesi için css dosyanıza bir geçersiz kılma eklemeniz gerekir)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Safari / WebKit tarayıcıları, ve type="search"gibi kullanırken ekstra özellikler de sağlayabilir , ancak aynı zamanda stillerinizin çoğunu (ör. Yükseklik, kenarlıklar) geçersiz kılarlar. Bu geçersiz kılmaları önlemek için, X düğmesi gibi işlevselliği korurken, bunu css'nize ekleyebilirsiniz:results=5autosave="..."
input[type=search] {
-webkit-appearance: none;
}Tarafından sağlanan özellikler hakkında daha fazla bilgi için css-tricks.com adresine bakın type="search".
HTML5, istediğinizi yaptığına inandığım 'arama' giriş türünü sunuyor.
<input type="search" />
İşte canlı bir örnek .
Bizim göz atın jQuery ClearSearch eklentisi. Yapılandırılabilir bir jQuery eklentisidir - giriş alanını şekillendirerek ihtiyaçlarınıza göre uyarlamak basittir. Aşağıdaki gibi kullanın:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>Aslında onu metin kutusunun içine koyamazsınız, maalesef sadece içindeymiş gibi görünmesini sağlayın, bu da maalesef bazı css'lerin gerekli olduğu anlamına gelir: P
Teori, girişi bir div içine sarmak, tüm kenarlıkları ve arka planları girişten çıkarmak, ardından div'i kutu gibi görünecek şekilde biçimlendirmektir. Ardından, koddaki giriş kutusundan sonra butonunuzu bırakın ve işler a good'un.
Yine de çalışmasını sağladıktan sonra;)
Yaratıcı bir çözüm buldum sanırım arıyorsun
$('#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>Elbette en iyi yaklaşım, her zamankinden daha fazla desteklenenleri kullanmaktır <input type="search" />.
Her neyse, biraz kodlama eğlencesi için, formun sıfırlama düğmesi kullanılarak da elde edilebileceğini düşündüm ve bu çalışma sonucudur (diğer girdileri yaşayamayacak, ancak bu yaklaşımla arama alanı veya sıfırlama düğmesi silinecektir. onlar da), javascript gerekmez:
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>Belki bu basit çözüm yardımcı olabilir:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Farklı görünmesi için bazı CSS'leri değiştirdim ve odak () ekledim;
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>