keydown事件如何工作？

Question

我希望如果我的輸入文本值不是空的，然後顯示我的.removetext股利但它不能正常工作。如果您在第二個字符之後鍵入某個字詞，我的.removetext正在隱藏，但如果我的輸入不爲空，請不要隱藏我的.removetext類。

我的錯誤在哪裏？我想我不明白的keydown事件

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var val = $.trim(this.value); 
 
    if (!val == "") { 
 
     $(".removetext").show(val.length > 0, function() { 
 
     var clear = $(this); 
 
     clear.on('click', function() { 
 
      alert('hey'); 
 
     }) 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }); 
 

 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 1

嘗試輸入 - 它處理過貼：

$(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var val = $.trim(this.value); 
 
    $(".removetext").toggle(val.length>0); // test anything not blank 
 
    }); 
 
    // the event handler needs to be HERE and not inside the inout handler 
 
    $(".removetext").on('click', function() { 
 
     alert('hey'); 
 
    }); 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels" value=""> 
 
    <div class="removetext">&times;</div> 
 
</div>

如果你需要一個回調你確實需要顯示和隱藏

$(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var show = $.trim(this.value).length>0; 
 
    if (show) { 
 
     $(".removetext").show("slow",function() { 
 
     console.log("showing"); 
 
     }); 
 
    } 
 
    else { 
 
     $(".removetext").hide("slow",function() { 
 
     console.log("hiding"); 
 
     }); 
 
    } 
 
     
 
    }); 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels" value=""> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 2

你可以達到你想要的使用keyup代替​​和改變你的if聲明如下：

if ($(this).val()); 

使用​​表示它不會使用輸入的.val，但會檢查.val之前輸入更新，因爲.val將更新後keyup事件。

一個更好的辦法是使用input event如下：

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 3

您應該使用KEYUP。按鍵註冊按鍵，但尚未填入輸入。您可以通過keydown事件屬性並使用屬性「key」（如果我沒記錯的話）來獲取在keydown期間輸入的值，但是如果要抓取輸入中的文本，則需要「keyup」

Answer 4

Keydown事件在鍵入字符之前觸發，因此您應該使用在輸入字符後觸發的鍵入事件。

此外，!$(this).val()比$(this).val()==""

不同使用if($(this).val()=="")

Answer 5

你可以在這裏更好地使用keyup和檢查$(this).val().length會更好。

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    if ($(this).val().length > 0) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 6

應該if ($(this).val())否則你的檢查，如果它是空的。 另外，使用keyup作爲​​捕捉您的val()它實際上有一個值之前。

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 7

keydown事件觸發時按下按鈕，在那一刻不更新你的價值，嘗試使用keyup事件觸發釋放按鈕和輸入值被更新時...

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    console.log(this,$(this).val()); 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

Answer 8

你不應該使用keydown事件，因爲它是一個按鍵的什麼寫入輸入value「後面」 。

理想情況下，你應該使用oninput（甚至不是每個人都建議的關鍵幀，而是@mplungjan誰更快:)。 oninput也將允許您正確地跟蹤複製/過去事件，不像onkeyup。

另外，只需通過this.value即可讀取輸入值，但請記得修剪它以消除空格。

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    if (this.value.trim()) { 
 
     $(".removetext").show(); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});

.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>