Tôi muốn có một biểu tượng nhỏ mà khi nhấp vào sẽ xóa văn bản trong hộp <INPUT>.
Điều này là để tiết kiệm không gian hơn là có một liên kết rõ ràng bên ngoài hộp đầu vào.
Kỹ năng CSS của tôi rất yếu ... Đây là ảnh chụp màn hình iPhone trông như thế nào.
Câu trả lời:
@thebluefox đã tóm tắt hầu hết tất cả. Bạn cũng chỉ buộc phải sử dụng JavaScript để làm cho nút đó hoạt động. Đây là một SSCCE, bạn có thể sao chép '
<!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 là bằng cách này không cần thiết, nó chỉ độc đáo tách logic cần thiết để tăng cường tiến bộ từ nguồn, bạn có thể dĩ nhiên cũng đi trước với đồng bằng 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>Bạn chỉ kết thúc với HTML xấu hơn (và JS không tương thích chéo;)).
Lưu ý rằng khi giao diện người dùng trông không phải là mối quan tâm lớn nhất của bạn, nhưng chức năng là, sau đó chỉ sử dụng <input type="search">thay vì <input type="text">. Nó sẽ hiển thị nút xóa (dành riêng cho trình duyệt) trên các trình duyệt có khả năng HTML5.
class="fa fa-remove"bên trong để hiển thị một biểu tượng chéo đẹp
top:trong khoảng con và thiết lập display: flex; align-items: center;trong khoảng cha mẹ.
Ngày nay với HTML5, nó khá đơn giản:
<input type="search" placeholder="Search..."/>Hầu hết các trình duyệt hiện đại sẽ tự động hiển thị một nút xóa có thể sử dụng trong trường theo mặc định.
(Nếu bạn sử dụng Bootstrap, bạn sẽ phải thêm ghi đè vào tệp css của mình để hiển thị)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Các trình duyệt Safari / WebKit cũng có thể cung cấp các tính năng bổ sung khi sử dụng type="search", như results=5và autosave="...", nhưng chúng cũng ghi đè lên nhiều kiểu của bạn (ví dụ: chiều cao, đường viền). Để ngăn những ghi đè đó, trong khi vẫn giữ chức năng như nút X, bạn có thể thêm phần này vào css của mình:
input[type=search] {
-webkit-appearance: none;
}Xem css-tricks.com để biết thêm thông tin về các tính năng được cung cấp bởi type="search".
HTML5 giới thiệu loại đầu vào 'tìm kiếm' mà tôi tin là làm những gì bạn muốn.
<input type="search" />
Đây là một ví dụ sống .
Kiểm tra plugin jQuery-ClearSearch của chúng tôi . Đây là một plugin jQuery có thể định cấu hình - việc điều chỉnh nó theo nhu cầu của bạn bằng cách định kiểu trường đầu vào rất đơn giản. Chỉ cần sử dụng nó như sau:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>Thật không may, bạn không thể đặt nó bên trong hộp văn bản, chỉ làm cho nó trông giống như bên trong nó, điều đó không may có nghĩa là cần một số css: P
Lý thuyết được bọc đầu vào trong một div, lấy tất cả các đường viền và nền ra khỏi đầu vào, sau đó tạo kiểu cho div trông giống như hộp. Sau đó, thả nút của bạn sau hộp nhập mã và công việc tốt.
Khi bạn đã có nó để làm việc nào;)
Tôi có một giải pháp sáng tạo Tôi nghĩ bạn đang tìm kiếm
$('#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>Tất nhiên cách tiếp cận tốt nhất là sử dụng sự hỗ trợ ngày càng nhiều <input type="search" />.
Dù sao để có một chút thú vị về mã hóa, tôi nghĩ rằng nó cũng có thể đạt được bằng cách sử dụng nút đặt lại của biểu mẫu và đây là kết quả hoạt động (đáng chú ý là không thể sống các đầu vào khác nhưng trường tìm kiếm với phương pháp này hoặc nút đặt lại sẽ xóa chúng cũng vậy), không cần 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>Có lẽ giải pháp đơn giản này có thể giúp:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Tôi vừa thay đổi một số CSS để làm cho nó trông khác biệt và thêm tiêu điểm ();
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>