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>

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

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;
        }
     });
})

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

3 个答案: