亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在輸入后檢測按鍵事件

在輸入后檢測按鍵事件

大話西游666 2023-06-09 14:47:51
我正在構建一個搜索功能,如果用戶輸入,就會出現一個自動建議框。他一按回車鍵,自動建議框就消失了,搜索結果被追加,搜索欄中的光標也消失了?,F在,當用戶再次關注搜索(再次輸入)時,自動建議框再次出現。我無法實現聲明的后半部分。在下面的代碼中,將“child-div”視為自動建議框。到目前為止,我能夠實現 -一旦用戶輸入三個字母,就會出現該框。點擊進入后,它消失了。我想進一步實現的目標-在完成上述第二步之后,“I”光標應該會從搜索框中消失。再次關注搜索框時,自動框應該會再次出現。<div class="container">              <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">              <div class="child-div" style="background-color: blueviolet; width: 50%; height: 200px; display: none;">                CHILD DIV              </div>            </div>$('#searchbar').on('input keydown', function (e) {    if ($('#searchbar').val().length >= 3) {        $('.child-div').show();    }    if( e.which == 13){        $('.child-div').hide();    }})如何實現最后一個場景?有人可以幫忙嗎?
查看完整描述

2 回答

?
小怪獸愛吃肉

TA貢獻1852條經驗 獲得超1個贊

最簡單的方法如下


$('#searchbar').on('input keydown', function (e) {

    if ($('#searchbar').val().length >= 3) {

        $('.child-div').show();

    }


    if( e.which == 13){

        $('.child-div').hide();

        e.target.blur();

    }

})


$('#searchbar').on('focus', function (e) {

    if ($('#searchbar').val().length >= 3) {

        $('.child-div').show();

    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

              <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">

              <div class="child-div" style="background-color: blueviolet; width: 50%; height: 200px; display: none;">

                CHILD DIV

              </div>

            </div>

在這里,您只需在按下回車鍵后執行一個模糊事件,并注冊焦點事件,它會檢查是否應該打開子 div



查看完整回答
反對 回復 2023-06-09
?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

您可以使用 JQuery blur() 和 focus() 事件。當用戶按下回車鍵時,我們將以編程方式關閉框并觸發輸入 blur() 事件以使其取消焦點。然后注冊一個 focus() 事件,只要輸入是焦點,它就會顯示框。

查看完整回答
反對 回復 2023-06-09
  • 2 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號