离开文本区域时需要激活JS代码

Need to activate JS code on leaving a textarea

本文关键字：激活 JS 代码 文本 区域 离开      更新时间：2023-09-26

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

<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 元素本身时，最好在

TextArea 元素本身上触发 cleanHTML 函数，所以如果用户粘贴一些代码然后继续，那么它将被触发。

所需的事件是什么，函数调用代码现在是什么样子的？ 我在下面提供了一个入门，其中包含 onblur 事件中的伪代码，如果 onblur 是正确的事件？

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

此外，链接所有文本区域以集中方式运行的最佳方法是什么。目前，我认为我需要在每个文本区域上放置所需的事件调用。

编辑1

            <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>

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>

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

随着你的JavaScript是：

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

关于你的最后一个问题：

"还有，连接所有文本区域以集中方式运行的最佳方法是什么。目前，我认为我需要在每个文本区域上放置所需的事件调用。

你可以在这里使用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/

我建议您不要使用它来盲目定位所有文本区域，而是执行以下操作：

<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>

是否有实际的 css 类用于textarea-cleanp并不重要

相关文章：