当 JSF 生成 HTML 代码时，textarea 的 onPaste 属性在哪里？答案

【问题标题】：Where does onPaste attribute of a textarea goes when JSF generates HTML code?当 JSF 生成 HTML 代码时，textarea 的 onPaste 属性在哪里？
【发布时间】：2015-07-25 09:36:38
【问题描述】：

我在 JSF 页面中有这个，

<textarea id="textarea" rows="4" cols="50"
                    onKeyPress="validate(event)" onPaste="validatepaste(event)"></textarea>

我不使用<h:inputTextarea> 的原因是因为这个JSF 标记似乎缺少onPaste 属性。

当我在谷歌浏览器中调试我的代码时，我惊讶地发现onPaste 属性不存在，呈现的html代码是，

<textarea id="j_id_2:textarea" name="j_id_2:textarea" 
      onkeypress="return validate(event)" cols="15" rows="5"></textarea>

由于 JSF 只是一个 HTML 代码生成器，我无法理解它对 onPaste 属性的作用以及为什么不支持它？

其次。我将如何在这个 html textarea 上实现值绑定？

编辑： 由于支持 onkeyup 并且是标准化的为什么在使用<hinputTextarea> 时onkeyup 功能会中断？

我无法实现与 html textarea 字段相同的功能。

一旦用户通过键盘输入或复制粘贴手动输入，以下功能可防止字母文本被“”替换。这是sn-p：

function validate(e) {
    console.log(e)
    var invalidcharacters = /[^0-9]/gi
    var phn = document.getElementById('textarea');
    if (invalidcharacters.test(phn.value)) {
        //e.value = e.value.replace(invalidcharacters, "");
        console.log("REPLACING");
        newstring = phn.value.replace(invalidcharacters, "");
        phn.value = newstring
    }
}

它适用于普通 html，如下所示。这里jsfiddle

<textarea id="textarea" rows="4" cols="50" onkeyup="validate(event)"></textarea>

使用

无法实现相同的功能

<h:inputTextarea value="#{myBean.myValue}" id="compTextArea" 
onkeyup="validate(event)"></hinputTextarea>

并在js文件方法中将var phn = document.getElementById('textarea');这一行替换为document.getElementById('compTextArea');。

这看起来很奇怪的任何原因？

【问题讨论】：

标签： html jsf-2

【解决方案1】：

<textarea ... onKeyPress="..." onPaste="...">

首先，JSF 使用 Facelets 作为视图技术。 Facelets 使用 XHTML+XML 来生成 HTML。 Camelcased 属性在 XHTML 中无效。分别是onkeypress 和onpaste。也许您从中获取此信息的来源将其与“onPaste”DOM 事件处理程序混淆了。

<textarea ... onkeypress="..." onpaste="...">

其次，onpaste 属性不是任何标准规范的一部分。另见HTMLElement.onpaste documentation on MDN。 JSF 并非旨在生成不符合标准的代码，因此它不能作为标准<h:inputTextarea> 组件的属性使用（但是——一旦它成为 DOM 标准的一部分，它可能会出现在未来的 JSF 版本中）。

无论如何，您都可以使用新的 JSF 2.2“HTML5 友好标记”功能来实现它：passthrough attributes。

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputTextarea ... a:onpaste="..." />

请注意，由于onpaste 不是任何当前标准的一部分，其功能取决于所使用的网络浏览器品牌/版本。您的 Chrome 版本显然不支持它，因此它在其 DOM 检查器中是不可见的（但它仍然在原始 HTML 源代码中可见，您可以通过右键单击、查看源代码或按 Ctrl kbd>+U）。

另见：

Custom HTML tag attributes are not rendered by JSF

【讨论】：

非常感谢您的回答。我给你投了赞成票。但是我看到 onkeyup 事件有些奇怪。请查看已编辑的部分。
JavaScript 作为客户端语言不能直接与 JSF 源代码一起工作，因为它在服务器端。 JavaScript 与 JSF 生成的 HTML 输出一起工作，就像它在客户端一样。 document.getElementById('textarea'); 不返回 HTML DOM 树中的现有元素。您应该已经在 JS 控制台中看到了一个错误。检查生成的 HTML 输出中的实际元素 ID。这是一个不同的问题。另见 a.o. stackoverflow.com/questions/6045307 特别检查 this 建议，这样您就根本不需要 getElementById()。
你的技能确实很棒。相信我，我已经浏览了网络上关于你生活的每一个材料。您所遭受的痛苦以及用于选择 DOS 游戏的 ANSI DOS Batch 程序……我喜欢一切，但有时让我感到不安的一件事是关于您对 Athesim 的信仰。每次看到你的名字在网上闪现时，我真的很难受。
不客气。我确实只相信经验和事实。这也是我的答案如此出色的原因（因为它们是基于它们的）。然而，我完全尊重其他宗教。人们只需要一个社区来汲取能量。