Keydown Javascript Function 在移动平台上不返回 false /exit（代码适用于桌面）

Question

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

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

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

编辑

如另一个 SO question中所述，您应该使用keypress或textinput事件而不是keydown事件，或允许229特殊代码。

编辑 2

keypress表示不会在某些键上触发按键，例如Shift 、 Esc和delete 。 但是这些控制键是allowedKeys中的控制键，所以也许这对你来说没问题。