Mobile phone soft keyboard realizes search function

A recent mobile project needs to realize the same function of clicking the search button on the soft keyboard of the mobile phone to achieve the same function of clicking the page search button. Although the function is quite small, it took a long time to meet the needs. I will briefly talk about the realization idea below. everyone is helpful

Functional Requirements

write picture description here

Click the soft keyboard to achieve the same search function as clicking go

Function realization

I checked a lot of articles and basically said that listening to the keydown event and judging the keyboard key value code, I have also tried the one that applies to the key and the soft keyboard I failed to use this method.

The onsubmit method of my form is implemented, that is, the code is directly under the form submission.

This part is the html code

<html>
<form target="#" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
</form>

This part is the js code

<script>
document.getElementById('search_from').onsubmit = function(){
    alert("123");
    yourfun();
}

In this way, the basic function is realized,
but in this case, clicking the search button will often refresh the page for the first time, and only the second time will the desired effect appear, so we also need to realize that clicking the page does not refresh

<script>
<form target="frameFile" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
    <iframe name='frameFile' style="display: none;"></iframe>
</form>

Just add an iframe tag like this. If the target of from corresponds to the iframe, it will not change the link of the current page, and it will not refresh.

There are many times when we click search, a long list will appear, and the soft keyboard will cover the information searched by the user. We click the screen to make the soft keyboard disappear, so the user experience is not very good, so we can call the method. The method of adding a soft keyboard to fold

<script>
document.getElementById('search_from').onsubmit = function(e){
    yourfun();
    document.activeElement.blur();//软键盘收起
}

Well, some basic needs can be realized. I hope it will be helpful to everyone. If there are any deficiencies, I hope you will leave a message for advice.

This is just a relatively basic function, such as multiple input submissions or more cumbersome functions need further study

Mobile phone soft keyboard search button to achieve click search function