Keydown Javascript 函数在移动平台上不会返回 false /exit代码适用于桌面 编辑编辑 2

问题描述

嗨，我对编码很陌生。我正在尝试创建一个仅一行的 contenteditable div，并在 [contenteditable] 达到与父元素相同的宽度时防止用户输入更多字符（例如，我不希望它溢出）。以下代码适用于桌面，但不适用于 android 或 IOS。似乎有两个问题； 1）返回false；不会在 android + IOS 上退出。 2) android + IOS 无法识别“e.which”数字……在 android 上所有键盘字母都是 229。我的问题是如何让此代码在移动平台上工作？非常感谢！

注意：在 android 上，所有键都是 e.which = 229，除了 Delete = 8 和 Enter = 13。代码返回 8 和 13，但不返回其余的 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>

解决方法

使用 e.preventDefault() 来防止默认键行为。此外，将所有 JS 代码包装到 onLoad 事件侦听器中，以确保在将事件侦听器附加到 DOM 时挂载 DOM（注释中的其他提示）：

<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>

编辑

如 another SO question 中所述，您应该使用 keypress 或 textinput 事件而不是 keydown 事件或 allow 229 special code。

编辑 2

jQuery says keypress will not be fired on some keys，例如 Shift、Esc 和 delete。但这些控制键是进入 allowedKeys 的键，所以也许这对你来说没问题。