我在 oracle.com 网站上注册了帐户，我看到了一些非常有趣的东西:
在表单中查看电话号码的输入字段。我如何将相同的内容复制到 JSF 输入表单中？这是CSS做的吗？
代码更新
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<script type="text/javascript">
<!-- input field shadow -->
var placeholder = "test field"
$("input").on({
focus: function() {
if (this.value == placeholder) {
$(this).val("").removeClass("shadow");
}
},
blur: function() {
if (this.value == "") {
$(this).val(placeholder).addClass("shadow");
}
}
}).trigger("blur");
</script>
</h:head>
<h:body>
<h1>JSF 2 textbox example with shadow</h1>
<h:form>
<h:inputText value="#{userBean.userName}" />
<h:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
我测试了这段代码，但它不起作用。也许我需要将 JavaScript 代码作为函数调用到 <h:inputText> 中标签？
最佳答案
这是自 HTML5 以来的新功能。这是 placeholder属性，在HTML5时代之前也被称为“水印”。
<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />
这当然只适用于支持 HTML5 的浏览器。使用 JSF 时，这仅适用于支持新 HTML5 的 JSF 组件 placeholder属性。标准 JSF <h:inputText>本身不支持这个(还)。您需要寻找支持此功能的第 3 方组件库。其中有PrimeFaces与其 <p:watermark> 组件:
<h:inputText id="phone" value="#{register.user.phone}" />
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />
这将检查是否支持 HTML5 然后使用 placeholder ，否则它会引入一些 JS/jQuery 魔法来模拟相同的东西。这一切都不是由 CSS 完成的。
如果出于某种原因无法使用 PrimeFaces，您需要自己重新发明一个自定义组件和/或一个自定义的 JS/jQuery 片段，就像 <p:watermark>正在幕后进行。
关于java - 如何在 JSF 输入字段中创建阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10489627/