在使用 onKeyUp 时禁用 javascript 中的箭头键

Question

我搜索了这个，但我找不到问题..也许我没有使用适当的关键字..如果重复，我很抱歉

这是我的问题。我在

HTML

、

PHP

、

AJAX

和

Javascript

中编写了代码。输入每个字符后，我正在数据库中检查

online username availability

。问题是

 onKeyUp

正在检测

arrow

键也作为输入

左右方向键

因此，当我尝试在文本字段中输入的文本之间插入字符时，

cursor

会自动移动到文本字段的末尾。因此无法在文本之间进行修改。

这是我的

HTML code

<input type = "text" name = "txt_username" id = "user" onKeyUp = "check_username(this.value)">
<span id = "check" style = 'color: green; font-size: 20px'> </span> <br>

这是

check_username()

函数

function check_username(str) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var arr = xmlhttp.responseText.split("^");
            document.getElementById("user").value = arr[1];

            if (arr[0] == 2) {
                $("#check").html("Enter a username of at least 4 characters");
            } else if (arr[0] == 1) {
                $("#check").html("Username already exists");
            } else {
                $("#check").html("Username available");
            }
        }
    }
    xmlhttp.open("GET", "username_check.php?txt_username=" + str, true);
    xmlhttp.send();
}

这是我的username_check.php

<?php
mysql_connect("localhost", "root", "");
mysql_select_db("company");

$username = ($_REQUEST['txt_username']);
$a = 0;

if (strlen($username) < 4) {
    $a = 2;
    echo $a . "^" . $username;
} else if (checkexistence($username)) {
    $a = 1;
    echo $a . "^" . $username;
} else {
    $a = 0;
    echo $a . "^" . $username;
}

function checkexistence($username) {
    $check = mysql_query("select username from employee");

    while ($row = mysql_fetch_array($check)) {
        if (strcmp($username, $row['username']) == 0) {
            return true;
        }
    }
    return false;
}
?>

我怎样才能以某种方式管理（通过禁用或保持一些检查）

arrow keys

以便可以在之间插入文本？

Answer 1

这是：

<input type = "text" name = "txt_username" id = "user" onKeyUp = "if(!(event.keyCode>36&&event.keyCode<41)){check_username(this.value)}">

Answer 2

我会在

onkeyup

（HTML 不区分大小写）中进行轻微调整，使用元素和事件，以便您可以在回调中使用它们：

<!-- use element and event as parameters -->
<input type = "text" name = "txt_username" id = "user" onkeyup = "check_username(this, event)">
<span id = "check" style = 'color: green; font-size: 20px'> </span> <br>

回调可以检查事件中的 keyCode，并在必要时使用该元素发送数据并进行操作：

function check_username(element, event) {
    if (event.keyCode > 36 && event.keyCode < 41) {
        // when arrow keys were pressed, do nothing
        return false;
    }

    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var arr = xmlhttp.responseText.split("^");
            if (element.value != arr[1]) {
                // only make change when required
                element.value = arr[1];
            }

            if (arr[0] == 2) {
                $("#check").html("Enter a username of at least 4 characters");
            } else if (arr[0] == 1) {
                $("#check").html("Username already exists");
            } else {
                $("#check").html("Username available");
            }
        }
    }
    // encode user name to use as get parameter
    xmlhttp.open("GET", "username_check.php?txt_username=" + encodeURIComponent(element.value), true);
    xmlhttp.send();
}

Answer 3

使用这个脚本

$(document).keyup(function(e){
    if (e.keyCode >= 37 && e.keyCode <= 40) { 
       //do something
       return false;
    }
});

代码37是左箭头
代码 38 是向上箭头
代码39是右箭头
代码 40 是向下箭头

此脚本拦截文档中的 keyup 事件并管理箭头键

尝试这个更完整的示例

$(document).ready(function(){    
     $('#user').keyup(function(e) {
        if (e.keyCode >= 37 && e.keyCode <= 40) { 
           //do something e.g. e.preventDefault();
           return false;
        }
     });
})