"검색" HTML5 입력의 삭제를 어떻게 감지합니까?
HTML5에서는search입력 유형은 텍스트 상자를 지울 수 있는 작은 X와 함께 오른쪽에 표시됩니다(적어도 Chrome의 경우 또는 기타의 경우).이 X가 Javascript 또는 jQuery에서 클릭되었을 때, 예를 들어 박스를 클릭했을 때 검출하거나 위치 클릭 검출(x-position/y-position)을 하는 방법 외에 검출할 수 있는 방법이 있습니까?
실제로 사용자가 검색하거나 사용자가 "x"를 클릭할 때마다 발생하는 "검색" 이벤트가 있습니다.이는 "증분" 속성을 인식하기 때문에 특히 유용합니다.
그렇다고는 해도, 「클릭」해크를 사용하지 않는 한, 「x」클릭과 검색의 차이를 알 수 있을지는 잘 모르겠습니다.어느 쪽이든, 이게 도움이 되길 바라.
바인드search-아래와 같이 검색창에 이벤트를...
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
'늦은' 답변을 추가하고 싶다.왜냐하면,change,keyup그리고.search오늘, 그리고 내가 결국 발견한 것이 다른 사람들에게도 도움이 될지도 몰라.기본적으로는 타입으로 검색 패널이 있기 때문에 작은 X의 누름에 적절히 대응하여(Chrome과 Opera에서는 FF가 구현하지 않음) 컨텐츠 페인을 클리어하고 싶을 뿐입니다.
난 이 코드를 갖고 있었어:
$(some-input).keyup(function() {
// update panel
});
$(some-input).change(function() {
// update panel
});
$(some-input).on("search", function() {
// update panel
});
(각자가 언제 어떤 상황에서 전화를 걸었는지 확인하고 싶었기 때문에 별개입니다).
Chrome과 Firefox의 반응은 다른 것으로 나타났습니다.특히 Firefox는changeChrome은 "입력 내용을 변경할 때마다"로 간주하는 반면, Chrome은 "포커스를 잃고 내용이 변경될 때"로 간주합니다.따라서 Chrome에서는 "업데이트 패널" 기능이 한 번 호출되었고, FF에서는 키 입력마다 두 번 호출되었습니다(하나 입력).keyup, 1 inchange)
또한 작은 X(FF 아래에 존재하지 않음)를 사용하여 필드를 클리어하면searchChrome에서 이벤트: 없음keyup,아니요.change.
결론은?사용하다input대신:
$(some-input).on("input", function() {
// update panel
}
테스트한 모든 브라우저에서 동일한 동작으로 동작하며 입력 내용이 변경될 때마다 반응합니다(마우스로 복사 붙여넣기, 자동 완성 및 "X" 포함).
Pauan의 대답으로, 그것은 대부분 가능하다.예.
<head>
<script type="text/javascript">
function OnSearch(input) {
if(input.value == "") {
alert("You either clicked the X or you searched for nothing.");
}
else {
alert("You searched for " + input.value);
}
}
</script>
</head>
<body>
Please specify the text you want to find and press ENTER!
<input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
2022년 쉽고 읽기 쉽고 짧은 솔루션
와, 여기 아주 간단한 문제에 대한 정말 복잡한 답이 몇 개 있네요.
청취자 추가만 하면 됩니다.'input'사용자가 입력에 무언가를 입력하거나 지우기 아이콘을 클릭할 때 캡처되는 검색 입력에 표시됩니다.
document.getElementById('searchInput').addEventListener('input', (e) => {
console.log(`Input value: "${e.currentTarget.value}"`);
})<input id="searchInput" type="search" placeholder="Search" />ES6+ 를 사용할 수 없는 경우는, 다음의 변환 코드를 참조해 주세요.
document.getElementById('searchInput').addEventListener('input', function(e) {
// Yay! You make it in here when a user types or clicks the clear icon
})`
오래된 질문인 건 알지만 비슷한 질문을 찾고 있었어요.[X] 를 클릭해 검색 박스를 클리어 한 타이밍을 확인합니다.여기 있는 어떤 대답도 나에게 전혀 도움이 되지 않았다.하나는 가까웠지만 사용자가 'Enter' 버튼을 누르면 'X'를 클릭하는 것과 동일한 결과가 표시됩니다.
다른 게시물에서 이 답을 찾았는데, 저에게 완벽하게 작동하며 사용자가 검색 상자를 지웠을 때만 부팅됩니다.
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// capture the clear
$input.trigger("cleared");
}
}, 1);
});
X를 클릭하면 변경 이벤트로 간주됩니다.필요한 작업을 수행하기 위해 onChange 이벤트를 이미 모두 설정했습니다.그래서 저는 jQuery 행을 간단하게 실행할 수 있었습니다.
$('#search').click(function(){ $(this).change(); });
브라우저에서는 접속할 수 없는 것 같습니다.검색 입력은 Cocoa NSSearch Field용 Webkit HTML 래퍼입니다.취소 버튼이 브라우저 클라이언트 코드 내에 포함되어 있어 래퍼에서 외부 참조가 제공되지 않는 것 같습니다.
출처:
- http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890
- http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state
- http://dev.w3.org/html5/markup/input.search.html#input.search
마우스 위치를 클릭해서 다음과 같이 파악해야 할 것 같습니다.
$('input[type=search]').bind('click', function(e) {
var $earch = $(this);
var offset = $earch.offset();
if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
// your code here
}
});
풀 솔루션은 이쪽
검색 x를 클릭하면 검색이 지워집니다.또는 사용자가 Enter 키를 누르면 검색 API를 호출합니다.이 코드는 추가 esc 키업 이벤트 매처와 함께 더 확장될 수 있지만, 이것으로 모든 것이 가능합니다.
document.getElementById("userSearch").addEventListener("search",
function(event){
if(event.type === "search"){
if(event.currentTarget.value !== ""){
hitSearchAjax(event.currentTarget.value);
}else {
clearSearchData();
}
}
});
건배.
여기 이것을 실현하는 한 가지 방법이 있습니다.HTML에 증분 속성을 추가해야 합니다. 그렇지 않으면 작동하지 않습니다.
window.onload = function() {
var tf = document.getElementById('textField');
var button = document.getElementById('b');
button.disabled = true;
var onKeyChange = function textChange() {
button.disabled = (tf.value === "") ? true : false;
}
tf.addEventListener('keyup', onKeyChange);
tf.addEventListener('search', onKeyChange);
}<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>원래 질문은 "X의 클릭을 감지할 수 있습니까?"입니다.이것은, 「희생」에 의해 실현됩니다.search이벤트입니다.
유형 검색 입력 상자의 라이프 사이클에는 다양한 시간에 발생하는 이벤트가 많이 있습니다.input,change,search그 중 일부는 특정 상황에서 중복됩니다.디폴트로는 Enter 키를 누르거나 'x' 키를 누르면 검색됩니다.incrementalAtribute는 문자를 추가/삭제할 때도 기동됩니다.또한 500밀리초의 지연으로 여러 변경을 캡처하여 청취자에게 과부하를 주지 않습니다.문제는...search와 함께 애매한 이벤트를 생성합니다.input.value == ""①"사용자가 x"를 눌렀다", (2) "텍스트가 없는 입력에서 사용자가 Enter를 눌렀다", (3) "사용자가 입력(백스페이스, 컷 등)을 빈 입력이 될 때까지 편집했다"의 3가지 방법이 있습니다.incremental요.search빈 입력에 대한 이벤트"를 표시합니다.
를 갖는 입니다.search'x'는 'x'로 하다.라고 입력합니다.잘은 Enter를 통해 수 .keydown 수 곳), (억제도 할 수 있는 곳),input 또는 change ★★★에 한 것. 유일한 것은search입니다.
수 incremental를 . . . . . . .를 사용하는 incremental의 '이러다', '이러다'를 이룰 수 거죠incremental를 한 동작inputevent (500ms) 드롭할 수 는, 드롭 할 수 있는 경우는incremental ()으로 .input의할 수 있습니다.search ★★★★★★★★★★★★★★★★★」keydownevent.preventDefault() 수 incremental위에서 설명한 애매한 부분이 계속 남아 있습니다.
이것을 나타내는 코드 스니펫을 다음에 나타냅니다.
inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");
function print(msg) {
monitor.value += msg + "\n";
}
function searchEventCb(ev) {
print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}
function keydownEventCb(ev) {
if(ev.key == "Enter") {
print(`Enter pressed, input value: "${ev.target.value}"`);
ev.preventDefault();
}
}
inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);<input type="search" id="inp" placeholder="Type something">
<textarea id="monitor" rows="10" cols="50">
</textarea>토막에서는, 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.search'x'를 누르면 처음 게시된 질문에 답변하는 전용 이벤트로 변환됩니다.input.valuekeydown를 누릅니다.
인적, 는 an an an an를 을 선호합니다.ev.target.blur()키를 ), 키를 모니터 하는 .change추적하는 이벤트input.value)input.value★★★★★★★★★★★★★★★★★를 통해keydown 일률적으로 할 수 input.value을 사용하다는 이 가 있기 에 이 일이 잘 .input.value실제로 변하기는 했지만 모두에게 효과가 있는 것은 아닐지도 모릅니다.
여기 이 토막이 있습니다.blur()behavior 이 발생했을 : （ 동 ( 、 only behavior only only only only only only 。
inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");
function print(msg) {
monitor.value += msg + "\n";
}
function searchEventCb(ev) {
print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}
function changeEventCb(ev) {
print(`Change fired, input value: "${ev.target.value}"`);
}
function keydownEventCb(ev) {
if(ev.key == "Enter") {
ev.target.blur();
ev.preventDefault();
}
}
inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("change", changeEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);<input type="search" id="inp" placeholder="Type something">
<textarea id="monitor" rows="10" cols="50">
</textarea>적어도 크롬에서는 검색 입력의 'X' 버튼이 다른 종류의 이벤트를 내보내는 것 같습니다.
MDN에는 입력 이벤트 또는 이벤트를 내보낼 수 있다고 기재되어 있습니다.https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
아래의 테스트를 실시합니다.텍스트 입력은 입력된 문자를 포함하는 "데이터" 속성을 가진 입력 이벤트이며 X 버튼을 클릭하면 이벤트 유형이 표시됩니다.
document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))
따라서 다음을 사용하여 구분할 수 있어야 합니다.
if (ev instanceof InputEvent) { ... }
이 게시물을 찾았는데 좀 오래된 건 알지만 답을 찾을 수 있을 것 같아.그러면 십자선 클릭, 백스페이스 및 ESC 키 누르기가 처리됩니다.저는 javascript를 아직 잘 모르기 때문에 더 잘 쓸 수 있을 거라고 확신합니다.다음은 jQuery(v1.6.4)를 사용한 결과입니다.
var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
$("input[type=search]").keyup(function(e) {
if (e.which == 27) { // catch ESC key and clear input
$(this).val('');
}
if (($(this).val() === "" && searchVal != "") || e.which == 27) {
// do something
searchVal = "";
}
searchVal = $(this).val();
});
$("input[type=search]").click(function() {
if ($(this).val() != filterVal) {
// do something
searchVal = "";
}
});
});
검색 또는 클릭이 작동...오래된 브라우저에 문제가 있는 것을 발견했습니다.검색에 실패합니다.많은 플러그인(jquery ui autocomplete 또는 fancytree 필터)에는 블러와 포커스 핸들러가 있습니다.자동 완성 입력 상자에 이 값을 추가하는 것이 효과적이었다(평가 속도가 빨랐기 때문에 this.value == " " 사용).그런 다음 작은 'x'를 누를 때 커서가 상자 안에 머물러 있었습니다.
Property Change와 입력은 IE 10과 IE 8 및 다른 브라우저 모두에서 동작했습니다.
$("#INPUTID").on("propertychange input", function(e) {
if (this.value == "") $(this).blur().focus();
});
FancyTree 필터 확장의 경우 다음과 같이 리셋 버튼을 사용하여 클릭 이벤트를 강제로 수행할 수 있습니다.
var TheFancyTree = $("#FancyTreeID").fancytree("getTree");
$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
var n,
leavesOnly = false,
match = $(this).val();
// check for the escape key or empty filter
if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
$("button#btnResetSearch").click();
return;
}
n = SiteNavTree.filterNodes(function (node) {
return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
}, leavesOnly);
$("button#btnResetSearch").attr("disabled", false);
$("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();
// handle the reset and check for empty filter field...
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
if ($("input[name=FT_FilterINPUT]").val() != "")
$("input[name=FT_FilterINPUT]").val("");
$("span#SiteNavMatches").text("");
SiteNavTree.clearFilter();
}).attr("disabled", true);
대부분의 용도에 적응할 수 있어야 합니다.
이거 먹어봐, 도움이 되길 바래.
$("input[name=search-mini]").on("search", function() {
//do something for search
});
나는 이것이 x를 클릭할 때만 발생하는 유일한 대답이라고 믿는다.
하지만, 이것은 좀 허술하고 구텐베르크의 대답은 대부분의 사람들에게 통할 것이다.
$('#search-field').on('click', function(){
$('#search-field').on('search', function(){
if(!this.value){
console.log("clicked x");
// Put code you want to run on clear here
}
});
setTimeout(function() {
$('#search-field').off('search');
}, 1);
});
서 ★★★★★'#search-field'jQuery jQuery 。'input[type=search]'모든 검색 입력을 선택합니다.필드를 클릭한 후 바로 검색 이벤트(Pauan의 답변)를 확인하는 방식으로 작동합니다.
js의 이벤트 루프에 근거해,click은 clear 버튼에서 트리거됩니다.search입력 시 이벤트가 발생하므로 아래 코드는 예상대로 작동합니다.
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
위의 코드 on click 이벤트는this._cleared = false이벤트 루프. 단, 이벤트는 항상 다음 시간 이후에 실행됩니다.onsearch때문에 할 수 있습니다.this._cleared했는지 합니다.X후 " " "를 트리거했습니다.onsearch
이 기능은 텍스트 붙여넣기, 증분 속성, ENTER/ESC 키 누르기 등 거의 모든 조건에서 작동합니다.
document.querySelectorAll('input[type=search]').forEach(function (input) {
input.addEventListener('mouseup', function (e) {
if (input.value.length > 0) {
setTimeout(function () {
if (input.value.length === 0) {
//do reset action here
}
}, 5);
}
});
}
ECMASCRIPT 2016
다음과 같이 onInput 이벤트를 바인딩하여 일반적인 방법으로 처리할 수도 있습니다.
<input type="search" oninput="myFunction()">
의 은 ★★★★★★★★★★★★★★★★★★★에 근거하고 있습니다.onclick하고(비어 확인), 다시 있는 합니다.이벤트: Clear 이 클릭되었음을 합니다.비어 있는 경우는 입력 필드뿐만 아니라 클리어 버튼이 클릭되었음을 의미합니다.
는 ''를 입니다.Vue★★★★
HTML
<input
id="searchBar"
class="form-input col-span-4"
type="search"
placeholder="Search..."
@click="clearFilter($event)"
/>
JS
clearFilter: function ($event) {
if (event.target.value !== "") {
setTimeout(function () {
if (document.getElementById("searchBar").value === "")
console.log("Clear button is clicked!");
}, 1);
}
console.log("Search bar is clicked but not the clear button.");
},
이에 대한 좋은 답이 없을 것 같아서 다른 해결책을 추가하려고 합니다.
// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
this.tableRows = [...this.temp_rows];
}
갱신하다
const searchElement = document.querySelector('.searchField');
searchElement.addEventListener('click', event => {
// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
this.tableRows = [...this.temp_rows];
}
});
제 경우 JQuery를 사용하고 싶지 않았고 입력도 일반적이기 때문에 '검색' 유형일 수도 있지만 항상 그렇지는 않습니다.여기 있는 다른 답변 중 하나를 바탕으로 조금 지연된 상태로 작업을 수행할 수 있었습니다.기본적으로 입력을 클릭했을 때 컴포넌트를 열고 싶었지만 지우기 버튼을 클릭했을 때는 열지 않았습니다.
function onClick(e: React.MouseEvent<HTMLInputElement>) {
const target = e.currentTarget;
const oldValue = target.value;
setTimeout(() => {
const newValue = target.value;
if (oldValue && !newValue) {
// Clear was clicked so do something here on clear
return;
}
// Was a regular click so do something here
}, 50);
};
const inputElement = document.getElementById("input");
let inputValue;
let isSearchCleared = false;
inputElement.addEventListener("input", function (event) {
if (!event.target.value && inputValue) {
//Search is cleared
isSearchCleared = true;
} else {
isSearchCleared = false;
}
inputValue = event.target.value;
});
fuse.js를 사용해 보세요.기본 구성에서는 검색에 의해 필터링된 경우 많은 결과가 발생할 수 있습니다.그러나 퓨즈 인스턴스의 옵션 개체에는 검색을 조정할 수 있는 많은 방법이 있습니다. https://fusejs.io/api/options.html
예를 들어 다음과 같습니다.임계값은 기본적으로 0.6으로 설정되어 있습니다.최대 1까지 올라가도 필터링은 되지 않습니다.0으로 내려가면 정확히 일치하는 결과만 표시됩니다.이 설정을 가지고 놀아라.
클라이언트 측 검색은 몇 분 안에 구현되며 많은 사용 사례에서 충분히 구현됩니다.
내 5c 값을 더하는 게 낫겠어.
키업 이벤트는 필드를 클리어하기 위해 X에서 마우스 클릭을 검출하지 않지만 입력 이벤트는 키 입력과 마우스 클릭을 모두 검출합니다.이벤트의 originalEvent 속성을 조사하여 입력 이벤트를 트리거하는 이벤트를 구분할 수 있습니다. 여기에는 상당한 차이가 있습니다.
가장 간단한 방법은 다음과 같습니다.
jQuery("#searchinput").on("input",function(event) {
var isclick = event.originalEvent.inputType == undefined;
}
키 입력의 경우 event.originalEvent.inputType = "insertText"입니다.
Chrome을 사용하고 있습니다.다른 브라우저에서는 테스트되지 않았지만 이벤트 오브젝트가 보편적이어서 대부분의 컨텍스트에서 동작할 수 있을 것 같습니다.
입력 내용을 클릭하는 것만으로 이벤트가 트리거되는 것은 아닙니다.
TextField 십자 버튼(X) onmousemove()가 눌렸을 때 이 이벤트를 사용하여 임의의 함수를 호출할 수 있습니다.
<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
언급URL : https://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input
'source' 카테고리의 다른 글
| Java .class 파일을 사람이 읽을 수 있는 방법으로 열려면 어떻게 해야 합니까? (0) | 2022.11.04 |
|---|---|
| 임시 디렉토리를 만들고 경로/파일 이름을 가져오려면 어떻게 해야 합니까? (0) | 2022.11.04 |
| 텍스트 값이 중복된 표 열 (0) | 2022.11.04 |
| Django의 CharField에 자리 표시자를 추가하려면 어떻게 해야 합니까? (0) | 2022.11.04 |
| Vue 형제 간에 데이터 전달 (0) | 2022.11.04 |