2

I am stuck in implementing the following:

  1. User starts typing in a textbox.
  2. The javascript on page captures the first character typed, validates that it is an english alphabet (a-z,A-Z) and converts it to lowercase (if necessary).
  3. Make an XMLHttp request based on the input (i.e. if first input character is a, get a.xml, if b get b.xml and so on).

I know how to do the last part (make the xmlhttp request) but am kind of stuck on how to capture the first character and validate it (in a way that works on all browsers). Please guide. Thanks.

Clarification: This is to create a Google Suggest like autocomplete-drop-down menu without the need for server side programs.

4

2 回答 2

3

像这样的东西应该工作：

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
        }
    });
});
于 2010-02-15T19:09:28.330 回答
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，直到焦点离开该字段才会触发，我认为这不是您想要的

于 2010-02-15T19:11:02.650 回答