替换后提交的字符错误答案

【问题标题】：Character submitted wrong after replace替换后提交的字符错误
【发布时间】：2017-03-02 08:22:48
【问题描述】：

我使用greasemonkey 脚本替换字段中的任何逗号或分号。有几个内部网站我必须这样做，有些只有输入字段，有些带有 textarea。

脚本确实有效，但是当我提交表单时，文本区域的替换字符仍然会以逗号和分号的形式提交。

为了确保在上次模糊之前不会触发提交，我添加了一个警报。

(function() {
'use strict';

$(document).ready(function(){
$("textarea").blur(function(){
    this.value=this.value.replace(/[,;]/g, "-");
    this.value=this.value.replace(/\n/g, " ");
});
$("input").blur(function(){
   this.value=this.value.replace(/[,;]/g, "-");
   this.value=this.value.replace(/\n/g, " ");
});
});

var nodes = document.getElementsByTagName('input');
if (window.location.href == "<website-url>")
nodes[39].setAttribute('onclick', 'alert("Data validated")');
    else
nodes[0].setAttribute('onclick', 'alert("Data validated")');

有什么想法吗？用不同的浏览器和不同的字符进行了测试。

【问题讨论】：

我建议在表单的submit 事件中进行更新，而不是（或除了）字段上的blur 事件；如果blur 在submit 之后针对您提交之前所在的字段触发，我一点也不感到惊讶。
alert 几乎是尝试这样做的最糟糕的方法。 :-) alert 和 focus/blur 有非常奇怪的相互作用，并且因浏览器而异。
是的，警报部分实际上是提供点击和实际提交之间的时间范围

标签： javascript jquery replace greasemonkey blur

【解决方案1】：

我会使用submit 事件来确保在提交之前处理尚未由blur 处理的任何挥之不去的更改：

$(document).ready(function() {
    function updateValue() {
        this.value = this.value.replace(/[,;]/g, "-").replace(/\n/g, " ");
    }
    $("textarea, input").blur(updateValue);
    $("form").submit(function() {
        $(this).find("textarea, input").each(updateValue);
    });
});

遗憾的是，Stack Snippets 不允许使用表单，所以这里是上面的 live on jsFiddle。请注意，如果您在字段中键入 cute;kittens，然后选择退出或提交，它会更改为 cute-kittens，这就是您发送表单时提交给 Google 的值。

【讨论】：

其实我没有检查正确，这和以前有同样的问题。字符只是在视觉上被替换
@PixPaw：当用户离开该字段然后提交表单时，这个绝对确实起作用。正如我之前所说，您不想在用户输入字段时替换字段的值（至少不会比 Konstantin 的回答多做很多的工作，以避免不断搞砸用户的插入位置）。 “仅在视觉上”是什么意思？它肯定会改变字段的值。
@PixPaw：我添加了一个 jsFiddle 来展示它的工作原理。
好的，我能够解决问题。我还必须在可替换字符中添加“和”，这确实适用于您的 sn-p。当我在网站上使用该文本区域执行相同操作并放置一个 ' 时，它会被替换（我可以看到我何时模糊它），但是，如果我提交，'被提交并导致问题并在'我注意到这种行为仅在 textarea 输入上，一切都在单行表单上运行良好。
@PixPaw：如果我添加 ' 和 " 并使用 textarea 并输入 cute'kittens 并单击搜索：jsfiddle.net/1rj0pkyj/1 提交的是更新值，cute-kittens。