Question

目前，我通过表单提交按钮上的OnClick事件清理TextArea中的文本。

<textarea id="comment" class="CleanHTML" cols=70 rows=5></textarea>
<button type="submit" id="btn" name="btn" value="Save" onClick='document.getElementsByClassName("CleanHTML")[0].value = cleanWordClipboard(document.getElementsByClassName("CleanHTML")[0].value)'>Save</button>

但是我现在认为这是有缺陷的，当用户离开时，在TextArea元素本身上触发cleanHTML函数会好得多，所以如果用户粘贴一些代码然后继续，那么它将会更好被触发。

什么是必需的事件以及函数调用代码现在会是什么样子？如果onblur是正确的事件，我在onblur事件中使用伪代码提供下面的启动器？

<textarea id="comment" cols=70 rows=5 onblur="this.value=cleanWordClipboard(this.value)"></textarea>

此外，将所有TextAreas链接起来以集中方式运行的最佳方法是什么？目前我认为我需要在每个TextArea上放置所需的事件调用。

EDIT1

            <script language="JavaScript">
            // Thanks to Johnathan Hedley for this code.
            var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230); // dec codes from char at
            var swapStrings = new Array("--", "--", "'", "'", "\"", "\"", "*", "...");
            function cleanWordClipboard(input) {
                // debug for new codes
                // for (i = 0; i < input.length; i++)  alert("'" + input.charAt(i) + "': " + input.charCodeAt(i));    
                var output = input;
                for (i = 0; i < swapCodes.length; i++) {
                    var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g"); // hex codes
                    output = output.replace(swapper, swapStrings[i]);
                }
                return output;
            }
        </script>

Answer 1

onBlur是正确的事件 - 它在元素失去焦点时触发。

编辑：

    <textarea id="comment" cols=70 rows=5 onblur="cleanWordClipboard(this)"></textarea>

<script language="JavaScript">
            // Thanks to Johnathan Hedley for this code.
            var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230); // dec codes from char at
            var swapStrings = new Array("--", "--", "'", "'", "\"", "\"", "*", "...");
            function cleanWordClipboard(input) {
                // debug for new codes
                // for (i = 0; i < input.length; i++)  alert("'" + input.charAt(i) + "': " + input.charCodeAt(i));    
                var output = input.value;
                for (i = 0; i < swapCodes.length; i++) {
                    var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g"); // hex codes
                    output = output.replace(swapper, swapStrings[i]);
                }
                input.value = output;
            }
        </script>

Answer 2

<textarea id="comment" cols=70 rows=5 onblur="cleanWordClipboard(this)" />

使用您的JavaScript：

function cleanWordClipboard(control) {
    control.value = "";
}

Answer 3

关于你的上一个问题：

“还有什么是将所有TextAreas链接到这种方式集中的最佳方法。目前我认为我需要在每个TextArea上放置所需的事件调用。”

您可以使用JQuery来帮助您。

<textarea id="commentA" cols=70 rows=5></textarea>
<textarea id="commentB" cols=70 rows=5></textarea>
<script>
$("textarea").blur(function(){
   cleanWordClipboard(this);
});
</script>

以下是一个非常粗略的例子：http://jsfiddle.net/CatmanDoes/p755m0n8/

我建议你不要用它盲目地针对所有textareas，而是做这样的事情：

<textarea id="commentA" cols=70 rows=5 class="textarea-cleanp"></textarea>
<textarea id="commentB" cols=70 rows=5 class="textarea-cleanp"></textarea>
<script>
$(".textarea-cleanp").blur(function(){
   cleanWordClipboard(this);
});
</script>

textarea-cleanp的实际css类是否无关紧要

需要在离开textarea时激活JS代码

3 个答案: