Keydown Javascript Function does not return false /exit on Mobile Platforms (code works for desktop)

Question

Hi i am very new to coding. I am trying to create a contenteditable div that is one line only and prevents the user typing more characters when the [contenteditable] reaches the same width as the parent element (e.g. i don't want it to overflow). The below code works on Desktop but not android or IOS. It seems there are 2 issues; 1) the return false; does not exit on android + IOS. 2) android + IOS do not recognise the "e.which" numbers...on android all keyboard letters are 229. My question is how do I get this code to work on mobile platforms please? Many thanks!

Note: On android all keys are e.which = 229 except Delete = 8 and Enter = 13. The code returns for 8 & 13 but not the rest 229.

<div class="textarea">
    
    <div contenteditable class="global-text-field">Lorum Ipsum</div>
</div>


<style>
.global-text-field{position:absolute;  white-space: nowrap;}
.textarea {position:relative; width:200px; height:50px; background:yellow;}
</style>


<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>

        $('.global-text-field').on('keydown', function(e){
        return OverflowOneLine(e);   
        });    
            
        function OverflowOneLine(e){
           
            var left = parseFloat($(event.target).css('left'));
            var right = parseFloat($(event.target).css('right'));
<!--e.which 8 = Delete, 46 = Backspace, 37 = ArrowLeft, 39 = ArrowRight-->
            if(right <= 6 && e.which !=46 && e.which !=37 && e.which !=39 & e.which !=8){
                return false;
            }
            
            return e.which != 13;
        }  
        
</script>

Answer 1

Use e.preventDefault() to prevent default key behavior. Also, wrap all the JS code into an onLoad event listener to ensure the DOM is mounted when the event listener is attached to the DOM (other tips in comments):

<div class="textarea">
    <div contenteditable class="global-text-field">Lorum Ipsum</div>
</div>

<style>
.global-text-field{position:absolute;  white-space: nowrap;}
.textarea {position:relative; width:200px; height:50px; background:yellow;}
</style>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>

// Use 2 spaces for JS indenting

// Wrap all code into an onload event listener
$(function() {

  // If you transpile your code or don't need compatibility
  // with old browsers, you'd better use `const` instead of `var`

  // KeyCodes: 8 = Delete, 46 = Backspace, 37 = ArrowLeft, 39 = ArrowRight
  var allowedKeys = [46, 37, 39, 8];

  function OverflowOneLine(e) {

    // Better use const if possible
    var left = parseFloat($(event.target).css('left'));
    var right = parseFloat($(event.target).css('right'));

    // Only use one condition (I've almost missed the one in the return)
    if(e.which === 13 ||
        (
          right <= 6 &&
          // Use an array to mark all the allowed keys
          // `includes` is not supported by any IE.
          // Polyfill it (conditionally) or use another solution
          // if you need to support IE.
          !allowedKeys.includes(e.which)
        )) {
      // Use preventDefault besides returning false
      e.preventDefault();
      return false;
    }

    return true;
  }

  // Directly bind the function callback without creating
  // an extra unneeded intermediate function
  $('.global-text-field').on('keypress', OverflowOneLine); 

});
        
</script>

Edit

As stated in another SO question, you should use keypress or textinput events instead of keydown event, or allow 229 special code.

Edit 2

jQuery says keypress will not be fired on some keys, like Shift, Esc, and delete. But those control keys are the ones into the allowedKeys, so perhaps this is ok for you.