在文本框中查找输入的第一个字符答案

【问题标题】：Find the first character of input in a textbox在文本框中查找输入的第一个字符
【发布时间】：2010-02-15 18:59:15
【问题描述】：

我坚持执行以下操作：

用户开始在文本框中输入内容。
页面上的 javascript 捕获输入的第一个字符，验证它是英文字母（a-z，A-Z）并将其转换为小写（如有必要）。
根据输入发出 XMLHttp 请求（即如果第一个输入字符是 a，则获取 a.xml，如果 b 获取 b.xml，依此类推）。

我知道如何做最后一部分（发出 xmlhttp 请求），但我有点坚持如何捕获第一个字符并验证它（以适用于所有浏览器的方式）。请指导。谢谢。

澄清：这是为了创建类似 Google Suggest 的自动完成下拉菜单，而不需要服务器端程序。

【问题讨论】：

应用是什么？这个例子似乎有点抽象和做作。

标签： javascript validation xmlhttprequest keylistener keyevent

【解决方案1】：

这样的事情应该可以工作：

HTML：

<input type="text" id="myField" />

在 JS 中：

window.onload = function() {
    document.getElementById('myField').onkeyup = function() {
        // Validate that the first letter is A-Za-z and capture it
        var letter = this.value.match(/^([A-Za-z])/);

        // If a letter was found
        if(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            this.value = letter + this.value.substring(1);

            // Do the request
        }
    }
}

我的 vanilla-JS 技能有点生疏，但这应该可以解决问题。顺便说一句，这里使用 jQuery 也是如此：

$(function() {
    $('#myField').keyup(function() {
        var letter = $(this).val().match(/^([A-Za-z])/);

        // If a letter was found
        if(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            $(this).val(letter + $(this).val().substring(1);

            // Do the request
        }
    });
});

【讨论】：

【解决方案2】：

问题的哪一部分你不知道怎么办？这是您可以遵循的方法。很可能需要调整，但这是一个很好的起点

如果我们的文本字段的 id 是 'txt'

document.getElementByID('txt').onkeypress = function(e) {
  var textInField = this.value;
  if (textInField.length == 1) {
    var firstChar = textInField.charAt(0);
    if (/[a-zA-Z]/.test(firstChar)) {
      sendXHR(textInField.value.toLowerCase())
    }
  } else {
    // What do you do if there is one or more chars???
  }
}

请注意，此处的其他答案提到了 onchange，直到焦点离开该字段才会触发，我认为这不是您想要的

【讨论】：

只有一个其他答案提到 onchange，我的没有；）