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

时间:2010-02-15 18:59:15

标签: javascript validation xmlhttprequest keylistener keyevent

我无法实施以下内容:

  1. 用户开始输入文本框。
  2. 页面上的javascript捕获键入的第一个字符,验证它是英文字母(a-z,A-Z)并将其转换为小写(如有必要)。
  3. 根据输入创建XMLHttp请求(例如,如果第一个输入字符是a,则获取a.xml,如果b获取b.xml,依此类推)。
  4. 我知道如何处理最后一部分(发出xmlhttp请求),但我仍然坚持如何捕获第一个字符并验证它(以适用于所有浏览器的方式)。请指导。感谢。

    澄清:这是为了创建一个类似自动完成下拉菜单的Google Suggest,而无需服务器端程序。

2 个答案:

答案 0 :(得分:2)

这样的事情应该有效:

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

答案 1 :(得分: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,在焦点离开场之前不会触发,我认为这不是你想要的