javascript - 自动更改表单域中的值

Question

我有一个网页，人们可以在其中输入信息(姓名、职位、地址等)，它会自动为他们创建名片。我目前有一些 jQuery 使用 .change 并在用户更改字段时查看它。

它会查找与他们输入的内容有关的问题，因为有些东西必须采用特定格式(例如，他们输入单词“Avenue”并且在他们将其更改为 Ave 之前不会让他们将商品添加到购物车.)

我试图找到一些方法来使用 JS/jQuery 自动即时执行此操作，但我不确定该怎么做。我希望该字段能够自行更新，因此如果用户输入“Avenue”，它会自动更新为“Ave”。在用户点击/退出该字段后。

知道可以使用什么 JS 和/或 jQuery 来做到这一点吗？

这是我当前的代码:

 var x = "Clean";
 var xD = " ";
 $('#cartText4046').change(function () {
        if ($(this).val().indexOf("Avenue") > -1) {
            x = "Please use Ave. instead of Avenue.";
        } else if ($(this).val().indexOf("avenue") > -1) {
            x = "Please use Ave. instead of Avenue.";
        ... Additional rules here, omitted for space.
        } else {
           x = "Clean";
        }


    if (x != "Clean") {
        $('#cartText4046').addClass("invalid");
        xD = x;
     } else if (x == "Clean") {
        $('#cartText4046').removeClass("invalid");
        xD = " ";
    }

     if (x != "Clean") {
        $('.betabutton').html('<span id="addToBaskettext">To add this to the Basket, 
         please fix the following issue(s):<br><br>&nbsp;' +xD'</span>');
        $('.betabutton').addClass("invalidBtn");
     } else if (x == "Clean") {
        $('.betabutton').html('<a id="addToBasket" href="#" onclick="actionPageSubmit();return false;"><span id="addToBaskettext">Add to Basket</span></a>');
        $('.betabutton').removeClass("invalidBtn");
    }

Answer 1

这是您可能正在寻找的工作示例。

$("#textbox").on("change", function() {
    $(this).val(function(index, value) {
        return value.replace('Avenue', 'Ave.');
    });
});

http://jsfiddle.net/decx8sw9/