Question

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

它会查找他们输入的内容的问题，因为有些内容必须采用某种格式（例如，他们输入单词＆＃34; Avenue＆＃34;并且它不会让他们将项目添加到他们的购物车，直到他们改为Ave.）

我试图通过JS / jQuery自动找到一些方法，但我不知道该怎么做。我想要的是该领域更新自己，所以如果用户放入＆＃34; Avenue＆＃34;它会自动更新为＆＃34; Ave。＆＃34;用户选中/退出该字段后。

有关JS和/或jQuery可用于执行此操作的任何想法吗？

这是我目前的代码：

 var x = "Clean";
 var xD = "&nbsp;";
 $('#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 = "&nbsp;";
    }

     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/

Answer 2

如果你真的希望它在用户完成更改后（“在用户选项卡/退出字段之后。”之后）执行此操作，您可能希望绑定到模糊（当焦点丢失/转移到其他元素时触发））...

$('#cartText4046').on( "blur", function() {
$(this).val(function(index, value) {
    value = value.replace('Avenue', 'Ave.');
    // keep going ... value = value.replace('Street', 'St.') ..
    return value;
});

Answer 3

编辑：我重读了这个问题，现在看到你希望在用户退出该字段后进行修正。此答案在用户键入时提供内联自动更正。我会留下它以防万一你发现它有用。

您可以从jQuery Autocorrect Plugin：jsfiddle。

中提取代码

$("#textbox").autocorrect({
    corrections: {
        Avenue: "Ave.",
        "...": "someWord"
    }
});

自动更改表单域中的值

3 个答案: