If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html?

<div id='demo'>
    <form class="id5-text-find-form" id="id5-text-find-form">
        <input class="search" placeholder="Find..." type="text">
        <input class="reset" type="reset" value="x">
    </form>
</div>


<textarea id="area">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</textarea>

css :

#demo {
    display:none;
}
#area {
    width:100%;
    height:200px;
}
kbd {
    border:1px solid grey;
    padding:4px;
}

jQuery :

$(document).keydown(function(e) {
    if ( e.ctrlKey && ( e.which === 70 ) ){
        $("#demo").show();
    }
})
$(".reset").click(function() {
    $("#demo").hide();
})

Image :

https://i.stack.imgur.com/BREqI.png

Fiddle Demo :

Answer №1

make sure to include e.preventDefault() in your keydown function to stop default actions

use $(".search").focus(); to give focus to a specific element

$(document).keydown(function(e) {
    if ( e.ctrlKey && ( e.which === 70 ) ){
        $("#demo").show();
        e.preventDefault();
        $(".search").focus();
    }
})

https://jsfiddle.net/ycgdd1gd/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing ad-hoc queries on a Postgresql database using Node.js and Express to manipulate row data

I am faced with a challenge of selecting one entry randomly from a table containing 46 entries, and then passing the data from that particular query to my handlebars files. I am unsure about how to approach the task of randomly querying the database and re ...

Guide on accessing oversized items (such as response objects) that are too immense for the command-line interface

Currently delving into coding and learning NodeJS, one aspect that keeps tripping me up is understanding the response object. It's quite comprehensive, and I find myself overwhelmed when trying to analyze all the data it outputs through console.log() ...

Creating HTML content using Racket

Is there a straightforward method for converting X-expressions to HTML in Racket without using response/xexpr? It appears that this function is mainly intended for serving http responses, but I only need to convert Racket lists (or X-expressions) into an ...

Iterating using a for loop within different functions

I am facing an issue with this project. I am planning to create a function that calculates from two different `for()` loops. The reason behind having 2 separate functions for calculation is because the data used in the calculations are fetched from differe ...

Copying a class and adding the second item in the duplicated class

I have been working with an ajax function to retrieve names from the database. The issue arises when there are multiple names returned - I split them and then attempt to clone the first class in order to display the additional names. However, this proces ...

Navigating AngularJS for User Authorization_REDIRECT

I've developed a login system using angularfire and firebase. Within this system, I have implemented a function that checks for the existence of authData when a user logs in or at other points in the application's flow. If authData is present, t ...

Conflicting Joomla Modules

I'm currently working on a project at the following link: www.eltotaldesign.com/planeteco Within this project, I have integrated the modules DJ Image Slider and Altra Switcher. Despite attempting to install Easy JQuery and other methods, I have been ...

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

Restangular is throwing an error because it cannot find the reference for _

I encountered an issue with Restangular where I'm getting the error message: Uncaught ReferenceError: _ is not defined from restangular when trying to use it. Code Snippet: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angula ...

In what way can I modify the object in the first array when the second array includes the same object but with varying values, excluding the primary value?

This is the initial array I am working with [{"e":"24hrTicker","E":1532084622977,"s":"ETHBTC","p":"-0.00260600","P":"-4.029","w":"0.06279622", "x":"0.06465200","c":"0.06207700","Q":"0.10800000","b":"0.06207900","B":"0.58000000","a":"0.06209300", "A":" ...

The relentless Livewire Event Listener in JavaScript keeps on running without pausing

I need to create a solution where JavaScript listens for an event emitted by Livewire and performs a specific action. Currently, the JavaScript code is able to listen to the Livewire event, but it keeps executing continuously instead of just once per event ...

Sending values from multiple radio groups in JavaScript can be done by accessing each group individually and extracting

This is an add to cart system. Currently, I am able to send quantity with an ID. However, I also want to send radio group values. How can I achieve this? Here are my codes: product.php <script> jQuery(function ($) { $('.popbutton').on(&a ...

Issues with the functionality of the ZeroClipboard Angular plugin

"> I'm fairly new to Angular and currently experimenting with a module called ZeroClipboard. I've made adjustments to my application in order to incorporate the module and configured it as per the demonstration. var app = angular.module ...

Unable to locate the "fcm-node" module in Node.js with TypeScript

When working on a TypeScript project, I usually rely on the fcm-node package to send Firebase push notifications in Node.js. However, this time around, I faced an issue. I know that for TypeScript projects, we also need to install type definitions (@types ...

Display images quickly when the mouse is hovering

I am looking to create a function that will flash images when the mouse hovers over them and then stop flashing when the mouse moves away. However, I am experiencing an issue where "flash_imgs" is being called every time there is a mouse movement over the ...

PHP: Dynamically adjust image size from database to fit different screen sizes

Managing a website with various categories means each category has its own assigned image stored in the database. So, when a product from a specific category like bikes or chairs is displayed on the website, the corresponding image needs to be retrieved an ...

The dimensions of the image are determined by its orientation

I am working with two different types of images on my website: vertical and horizontal. Currently, I have a JavaScript function that adjusts the height of all images to fit the screen size. However, I would like to modify this function so that it also adap ...

Turbolinks gem causing ShareThis to malfunction

After adding the turbolinks and jquery-turbolinks gems to my project, I noticed that my ShareThis button no longer pops up when clicked. The ShareThis scripts currently included in my application.html.erb head are: <script type="text/javascript">va ...

Unable to modify the border color of the outline in MUI text fields

I am currently working on a React project using MUI and styled-components, but I am facing an issue with changing the outline border color of a textfield. Despite reading the documentation and attempting to overwrite the class names of the component, it do ...

Which function is most suitable for verifying if the values from req.param are NaN and assigning a new value if they are found to be NaN?

Regarding the about page: I'm currently working on a react app that sends URL parameters to the backend server. The frontend URL looks something like this: maxprice=100000&minsqm=50&maxsqm=100&page=1, which are the user's filters for ...