1

I am trying to disable arrow up and down function for a selection list field. I have searched and tried all the options but could not disable. When alerting with the keys it is working but when I try to disable it does not work. Is there any updates related with browsers

My Chrome Version: 89.0.4389.128 (Official Build) (64-bit)

// we are closing the arrow keys for selection
$(function()
{
    $('.form-contact').on('keyup',function(e) {
        if(e.keyCode === 38 || e.keyCode === 40) { //up or down
            // alert(e.keyCode)
            e.preventDefault();
            return false; 
        } 
    });
});

Last code something like this. it does not prevent arrow up or down to the list but it prevents selection by enter from the list. So better than nothing. Still open my question.

 $('.form-contact,.form-company,.form-address,.form-postcode,.form-phone,.form-email').on('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
            }
        }
    }, {
        capture: true,   // this disables arrow key scrolling in modern Chrome
        passive: false   // this is optional, my code works without it
    });
ORCAs
  • 151
  • 2
  • 13
  • Just use `e.preventDefault()`. Not sure why you would want to go up to the view when you have the event in `e`... – Heretic Monkey Apr 23 '21 at 01:37
  • Thanks for the reply. I tried e.preventDefault() but it did not work too .I saw e.view.event.preventDefault(); this structure one forum and I tried like that. It remained like that now I am updating the code. $(function() { $('.form-contact').on('keyup',function(e) { if(e.keyCode === 38 || e.keyCode === 40) { //up or down // alert(e.keyCode) e.preventDefault(); return false; } }); }); – ORCAs Apr 23 '21 at 05:34
  • Does this answer your question? [Disable arrow key scrolling in users browser](https://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser) – Don't Panic Apr 23 '21 at 08:49
  • unfortunately it is not. normally in main screen yes it is working but when talking about a jquery autocomplete selection text fields it does not work. I can still use arrow keys. I can catch keys and see them in console log but could not prevent to move up or down the list. – ORCAs Apr 23 '21 at 08:52
  • I have did something like this. It does not prevent the user move up or down the list but it prevents selection with enter. So it solved some part of my issue. But my proper needment is that to not use arrow up and down buttons in the select list. (which is type="text" and we are using autocomplete plugin) I have updated the question now. ı can not write total codes in here. Thanks by the way. – ORCAs Apr 23 '21 at 08:55
  • I don't see anything in your question about autocomplete ... ? Is some of the code you've shown related to that? It is hard to provide help if the question is not clear, and especially if it keeps changing. Please edit your question, and add all relevant info. – Don't Panic Apr 23 '21 at 09:31
  • Sorry for the confusing I just want to add my improvement so somebody can find an easy and better solution. I will review my code again and see if I can share autocomplete section too. Thanks. – ORCAs Apr 24 '21 at 05:52

2 Answers2

1

Instead of keyup, use keydown event

$(function()
{
    $('.form-contact').on('keydown',function(e) {
        if(e.keyCode === 38 || e.keyCode === 40) { //up or down
            // alert(e.keyCode)
            e.preventDefault();
            return false; 
        } 
    });
});
sudin
  • 314
  • 2
  • 11
0

This might be helpful:

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

Found it here Disable arrow key scrolling in users browser

poPaTheGuru
  • 1,009
  • 1
  • 13
  • 35
  • 1
    Thanks for the answer. it worked for the main screen but I have a jquery autocomplete field like ('.form-contact'). unfortunately It does not work in the selection field. – ORCAs Apr 23 '21 at 06:03
  • $('.form-contact').on("keydown",function(e){ console.log(e.keyCode); if([38,40].indexOf(e.keyCode) > -1) { console.log(e.keyCode+"we are in"); e.preventDefault(); return false } }) – ORCAs Apr 23 '21 at 06:18
  • https://stackoverflow.com/questions/7973567/jquery-autocomplete-disables-up-down-arrows-in-a-textarea-why and https://www.geeksforgeeks.org/how-to-disable-arrow-key-in-textarea-using-javascript/ They are text area tho, but it might be the same logic for a selection list. Hope it helps – poPaTheGuru Apr 23 '21 at 06:20