jQuery if语句触发了两次

Question

我正在尝试使用 jQuery 在 html 输入中写入只读值，但我运行遇到了单个 if 语句触发两次的问题。

基本上输入以 html 中的默认值开始 [这是只读值]:

<input id="main-field" type="text" value="dan" >

然后，jQuery 'keypress keydown' 函数检查与只读单词相关的按下键的索引，以及索引是在单词之前还是之后 returns 'true' 这将添加字符，否则它将 return false 这将阻止添加字符。问题是，如果我在单词前键入，它会将只读单词的索引增加两次，它应该增加一个（因为只读单词为每个字符移动了一个索引）。这是 'keypress keydown' 函数；希望它很容易理解（如果不明白请告诉我，我也想在这方面做得更好）：

var readOnlyEnd = $('#main-field').val().length,
    readOnlyStart = 1;

$('#main-field').on('keypress keydown', function(event) {

    var character = String.fromCharCode(event.keyCode).toLowerCase();

    // note: using the jquery caret plugin
    var pos = $('#main-field').caret();

    // handling new character between 'a' and 'z' and the delete char.
    if (((character >= 'a') && (character <= 'z')) || (event.which == 8)) {

        // if delete is pressed:
        if (event.which == 8) {
            if (pos == readOnlyEnd) return false;
            else if (pos < readOnlyStart) {
                if (pos == 0) return true;
                if (pos > 0) {
                    console.log('reudce index!!');
                    // Will reduce indexes.
                    readOnlyStart -= 1;
                    readOnlyEnd -= 1;
                    return true; // Will delete.
                }
            }
            else if ((pos >= readOnlyStart) && (pos < readOnlyEnd)) return false;
        }

        // within the word.
        else if ((pos >= readOnlyStart) && (pos < readOnlyEnd)) return false;

        // before the readonly word. - HERE IS THE PROBLEM, INCREASING TWICE.
        else if (pos < readOnlyStart) { 
            readOnlyStart += 1;
            readOnlyEnd += 1;
            return true; // Will add character
        }
        else {
            return true;
        }
    }
    else { 
        // In case something that doesn't affect the input was pressed (like left/right arrows).
        return true;
    }
});

注意：我在光标位置使用 jQuery 插入符号插件。

如果您有任何想法或建议，或者我的问题的解决方案是否与此处另一个问题的解决方案相似，请告诉我

Answer 1

您应该只使用一个事件。以下语句中的 keypress 或 keydown：

$('#main-field').on('keypress keydown', function(event) {

这将在一次按键时触发事件两次。

因此，将您的陈述更改为：

$('#main-field').on('keypress', function(event) {

jQuery if语句触发了两次

jQuery if statement triggered twice

javascript

jquery

html

input

readonly