取消選擇搜索框發光效果作爲用戶類型

Question

我有一個發光效果的搜索框。一旦用戶開始輸入，我只想讓發光效果消失。我怎樣才能做到這一點？我在我的搜索框的CSS部分下方提供了我的jQuery腳本。我認爲修改，但必須從jQuery。

(function($) { 
 
    $(function() { 
 
    $('#wsite-header-search-form .wsite-search-input').attr('placeholder', 'Search Store ...') 
 
    }); 
 
}(jQuery)); 
 

 
$(document).ready(function() { 
 
    $("input[type='text']").on('focus', function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '0px 0px 10px 2px #fafafa' 
 
    }); 
 
    }); 
 
    $("input[type='text']").on('blur', function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '0px 0px 0px 0px #fafafa' 
 
    }); 
 
    }); 
 
});

.wsite-search form { 
 
    transition: 1s ease; 
 
    border-radius: 7px; 
 
    height: 30px; 
 
}

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

 
<div class="wsite-search"> 
 
    <form id="wsite-header-search-form"> 
 
    <input type="text" class="wsite-search-input" /> 
 
    </form> 
 
</div>

多謝您的幫助！

Answer 1

您可以使用jQuery的keydown：https://api.jquery.com/keydown/

這裏是一個代碼，你提供了一個例子：

(function($) { 
 
    $(function() { 
 
    $('#wsite-header-search-form .wsite-search-input').attr('placeholder', 'Search Store ...') 
 
    }); 
 
}(jQuery)); 
 

 
$(document).ready(function() { 
 
    $("input[type='text']").on('focus', function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '0px 0px 10px 2px #fafafa' 
 
    }); 
 
    }); 
 
    $("input[type='text']").keydown(function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '0px 0px 0px 0px #fafafa' 
 
    }); 
 
    }); 
 
});

.wsite-search form { 
 
    transition: 1s ease; 
 
    border-radius: 7px; 
 
    height: 30px; 
 
}

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

 
<div class="wsite-search"> 
 
    <form id="wsite-header-search-form"> 
 
    <input type="text" class="wsite-search-input" /> 
 
    </form> 
 
</div>

編輯：

這裏也是很多更簡單具有輸入和背景顏色的解決方案：

https://jsfiddle.net/m3c9y9pu/

$(function() { 
    $("input[type='text']").on('focus', function() { 
    $(this).css('background', 'yellow') 
    }); 

    $("input[type='text']").keypress(function() { 
    $(this).css('background', 'red') 
    }); 
}); 

input{ 
    background: red; 
} 

<input type="text" class="wsite-search-input" /> 

Answer 2

我加了keyup事件，請注意，我還檢查了keyup內，如果當前輸入的值不爲空。

這裏是一個工作版本：

(function($) { 
 
    $(function() { 
 
    $('#wsite-header-search-form .wsite-search-input').attr('placeholder', 'Search Store ...') 
 
    }); 
 
}(jQuery)); 
 

 
$(document).ready(function() { 
 
    $("input[type='text']").on('focus', function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '0 0 10px 2px #ff0000' 
 
    }); 
 
    }); 
 
    $("input[type='text']").on('blur', function() { 
 
    $('.wsite-search form').css({ 
 
     'boxShadow': '' 
 
    }); 
 
    }); 
 
    $("input[type='text']").on('keyup', function() { 
 
    if ($(this).val() != '') { 
 
     $('.wsite-search form').css({ 
 
     'boxShadow': '' 
 
     }); 
 
    } else { 
 
     $('.wsite-search form').css({ 
 
      'boxShadow': '0 0 10px 2px #ff0000' 
 
     }); 
 
    } 
 
    }); 
 
});

.wsite-search form { 
 
    transition: 1s ease; 
 
    border-radius: 7px; 
 
    height: 30px; 
 
}

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

 
<div class="wsite-search"> 
 
    <form id="wsite-header-search-form"> 
 
    <input type="text" class="wsite-search-input" /> 
 
    </form> 
 
</div>

Answer 3

您可以使用jQuery的change

$(document).ready(function() { 
    $("input[type='text']").change(function() { 
    // If input is not empty 
    if($(this).val()) { 
     // Remove shadow 
    } else { 
     // Add shadow 
    } 
    }); 
});