I have two text box on the header for search, one is for mobile and one for Web, which I am showing based on screen resolution.
And few more on a different page. on pressing enter on the search box it should redirect to search page with query string with it.
Same is working in web case or if it has only search box available.
If it has more input then on enter it navigate it to next box available.
For Web
<input autofocus="" class="form-control txt-header-search-box" id="txt-header-search-box" placeholder="Search" type="text">
For mobile
<input class="txt-header-search-box" id="txt-header-search-box-mobile" tabindex="99999" placeholder="Search Here" type="text">
I tried it with tabindex and JQuery. it is not working in mobile case.
as we are getting no value on pressing enter/go if it has more then one input box.
JQuery I am using
function searchRedirect(val, e) {
var eCode = (e.keyCode ? e.keyCode : e.which);
if(isMobile && (13 == eCode || 0 == eCode)) {
//if(isMobile && 13 == eCode) {
e.preventDefault();
window.location.href = "/SearchResult?searchtext=" + val;
} else if(13 == eCode) {
e.preventDefault();
window.location.href = "/SearchResult?searchtext=" + val;
}
}
$("#txt-header-search-box").on("keydown input", function(e){
var searchVal = $("#txt-header-search-box").val();
searchRedirect(searchVal, e);
});
//$('#txt-header-search-box-mobile').on('keyup input', function(e){
//$('#txt-header-search-box-mobile').on('keydown input', function(e){
//$('#txt-header-search-box-mobile').on('keydown', function(e){
//var searchVal = $('#txt-header-search-box-mobile').val();
//searchRedirect(searchVal, e);
//});
$('#txt-header-search-box-mobile').on('keyup', function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(13 == code)
{
//$(this).focusout();
var r=$('#txt-header-search-box-mobile').val();
return r&&(window.location.href='/SearchResult?searchtext='+r),!1
}
});
//Search check-mobile or web
var isMobile = false;
var checkIsMobile = function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))isMobile = true;}
checkIsMobile(navigator.userAgent||navigator.vendor||window.opera);
//Search check-mobile or web<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="txt-header-search-box" id="txt-header-search-box-mobile" tabindex="99999" placeholder="Search Here" type="text">
<input autofocus="" class="form-control txt-header-search-box" id="txt-header-search-box" placeholder="Search" type="text">Any one have any idea on this?