iPhone처럼 HTML 텍스트 입력 상자 안에 명확한 단추를 넣으려면 어떻게해야합니까?
답변:
@thebluefox가 가장 요약했습니다. 또한 버튼을 작동시키기 위해 JavaScript 만 사용해야합니다. 다음은 SSCCE입니다. 복사하여 붙여 넣기를 실행할 수 있습니다.
<!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 는 필요하지 않습니다. 프로그레시브 향상에 필요한 논리를 소스와 멋지게 분리하면됩니다. 물론 일반 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>더 추악한 HTML (및 크로스 브라우저 호환이 아닌 JS;) 만 끝납니다.
UI 룩앤필이 가장 큰 관심사는 아니지만 기능은, <input type="search">대신에 사용하십시오 <input type="text">. HTML5 지원 브라우저에서 (브라우저 별) 지우기 버튼이 표시됩니다.
7
텍스트 필드가 비어있을 때 지우기 버튼을 숨길 수 있습니까?
—
root
IE9에서는 텍스트가 십자 아이콘 아래에 표시됩니다.
—
sedovav
테마가 변경되었으므로 이미지의 URL이 더 이상 올바르지 않습니다. 이전 이미지에 액세스 할 수 있습니다 web.archive.org/web/20150101025546/http://cdn.sstatic.net/...
—
zacaj
당신은 또한에 글꼴 멋진 아이콘을 사용할 수 있습니다
—
singe3
class="fa fa-remove"멋진 크로스 아이콘을 표시하는 내부 스팬에
순수한 Javascript 버전을 사용했으며 Win / Linux Firefox / Chrome의 버튼 중앙을 제외하고는 잘 작동했습니다.
—
thomasa88
top:자식 범위에서 제거 display: flex; align-items: center;하고 부모 범위에서 설정하여 문제를 해결했습니다 .
요즘 HTML5에서는 매우 간단합니다.
<input type="search" placeholder="Search..."/>대부분의 최신 브라우저는 기본적으로 필드에 사용 가능한 지우기 단추를 자동으로 렌더링합니다.
(부트 스트랩을 사용하는 경우 css 파일에 재정의를 추가하여 표시해야 함)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
사용하는 경우 사파리 / 웹킷 브라우저도 추가 기능을 제공 할 수있는 type="search"것처럼, results=5그리고 autosave="...", 그러나 또한 (테두리, 예를 들어, 높이) 당신의 스타일의 많은 우선합니다. X 버튼과 같은 기능을 계속 유지하면서 이러한 재정의를 방지하기 위해 CSS에 이것을 추가 할 수 있습니다.
input[type=search] {
-webkit-appearance: none;
}에서 제공하는 기능에 대한 자세한 내용은 css-tricks.com을 참조하십시오 type="search".
훌륭한 답변, 코드가 없습니다. 불행히도, 내 제품에서 크롬 추가 기능이 될 것입니다. :
—
guillaumepotier
'검색'유형이 모든 최신 브라우저에서 지원되지만 (여기에서 지원 확인 : wufoo.com/html5) Firefox (32.0.3) 또는 Opera (12.17)에는 지우기 단추가 표시되지 않습니다.
—
justanotherprogrammer
최신 Chrome에서도 삭제 버튼이 표시되지 않음
—
tsayen
부트 스트랩을 사용하는 경우 기본 동작을 무시할 수 있습니다
—
aexl
연결된 CodePen에 입력에 닫는 슬래시가 없으므로 CodePen에서 작동하는 것을 보려면 닫는 슬래시를 추가하십시오.
—
Gen1-1
@ Gen1-1 죄송합니다. 공개 업로드가 사용 중지 된 것 같습니다. 누구나 고정 코드 펜을 사용하는 경우 blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed , 수정하고 수정하는 데 도움을 주시기 바랍니다 데모
—
ThorSummoner
jQuery-ClearSearch 플러그인을 확인하십시오 . 구성 가능한 jQuery 플러그인입니다. 입력 필드의 스타일을 지정하여 필요에 맞게 조정할 수 있습니다. 다음과 같이 사용하십시오.
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
대단하지만 "$ (window) .resize (function () {triggerBtn ()});" jthis.on ( 'keyup keydown change focus', triggerBtn) 직후 jquery.clearsearch.js에서; | 그 크기 조정 창은 십자가 위치 엉망이되지 않도록
—
잉 Sek의 긴
나는 당신이 찾고 있다고 생각하는 창의적인 솔루션을 얻었습니다.
$('#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>물론 가장 좋은 방법은 더 많은 지원을받는 것 <input type="search" />입니다.
어쨌든 약간의 코딩 재미를 위해 폼의 재설정 버튼을 사용하여 달성 할 수 있다고 생각했으며 이것이 실제 결과입니다 (다른 입력을 할 수는 없지만 검색 방식은이 접근법을 사용하거나 재설정 버튼은 지워집니다) 그들도), 자바 스크립트가 필요하지 않습니다 :
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>이 간단한 솔루션이 도움이 될 수 있습니다.
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
이 코드는 OP의 문제에 대한 해결책을 제공 할 수 있지만이 코드가 질문에 대한 이유 및 / 또는 방법에 대한 추가 컨텍스트를 제공하는 것이 좋습니다. 비슷한 문제를 겪는 미래의 시청자가 솔루션의 추론을 이해할 수 없기 때문에 코드는 일반적으로 장기적으로 답변 만 쓸모 없게됩니다.
—
E. Zeytinci
@Mahmoud Ali Kaseem
CSS가 다르게 보이도록 변경하고 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>