'Disable Touch events on webpage

I have a webpage with form and I am trying to disable the touch events in that webpage I am trying to not focus on the input field with touch.

For example, page load focus will go to the input field and the user will enter anything in the input field through a keypad e.g 12345.

Now I want to restrict the user that user can't select or move back to any letter and delete it using touch screen using keypad he can

androidhtmljquerygoogle-chrometouch


Solution 1:[1]

If you mean touch actions, you can disable them by inserting this string in your css in the desired container / body

body {
    touch-action: none;
}

Read more about touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Solution 2:[2]

As Matteo said you could use touch events in the body tag. However, if you need to do it with js you can add an event listener that will react to a bunch of actions like touchstart, touchmove, touchend.

Here is the code snippet for that:

document.querySelector('.your-element').addEventListener('touchend', function (event) {
        e.preventDefault();
    });

MDN docs: Touch events

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matteo
Solution 2 Mohammed Alwedaei

Related Questions