自动更改表单域中的值

我有一个网页，人们可以输入信息（姓名，职位，地址等），并自动为他们创建名片。 我目前有一些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('To add this to the Basket, please fix the following issue(s):

 ' +xD''); $('.betabutton').addClass("invalidBtn"); } else if (x == "Clean") { $('.betabutton').html('Add to Basket'); $('.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" } });