如何在 JSF 输入字段中创建阴影答案

【问题标题】：How to create shadow in JSF input field如何在 JSF 输入字段中创建阴影
【发布时间】：2012-05-16 09:45:06
【问题描述】：

我在 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> 标记中？

【问题讨论】：

标签： java javascript css jsf jsf-2

【解决方案1】：

我认为他们正在使用 jquery 的水印来做到这一点。附件是该页面的萤火虫视图，它显示了

【讨论】：

【解决方案2】：

这是自 HTML5 以来的新功能。就是placeholder属性，在HTML5时代之前也被称为“水印”。

<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />

这当然只适用于支持 HTML5 的浏览器。使用 JSF 时，这只适用于支持新 HTML5 placeholder 属性的 JSF 组件。标准的 JSF <h:inputText> 本身不支持这个（目前）。您需要寻找支持此功能的 3rd 方组件库。其中有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> 在幕后所做的那样。

【讨论】：

我有一个不知道如何实施的问题。我想使用@VisioN 发布的示例。我不确定如何将此值 e.g. +994 (12) 491 2345 从 JSF getter 传递到 JavaScript 代码，因为我想将此值存储到数据库中？这可能吗？
当然有可能。 JSF 是一个 HTML 代码生成器。只需让 JSF 打印该值，就好像它是一个 JS 变量。
想请教一下@VisioN贴出的代码。我将代码插入到简单的 JSP 页面中，但是当我在 Firefox 中打开它时，阴影不起作用。我怀疑我必须从 <h:inputText> 字段调用 JavaScript 代码？但是必须使用什么属性来调用 JavaScript 代码以及我必须如何向它发送参数才能在每个输入字段中具有不同的阴影？
只要让 JSF 相应地打印 HTML/JS 代码即可。例如。 <script>var foo = '#{bean.foo}';</script> 等等。您似乎无法理解 JSF 在 webserver 上运行并生成 HTML/JS 代码，而 HTML/JS 又在 webbrowser 上运行。 JSF 和 HTML/JS 不同步运行之类的。
是的，现在我明白你的意思了。我以为我只能在 html 代码中调用托管 bean。没关系。我在帖子中测试了代码，但它不起作用。

【解决方案3】：

如果您无法使用 PrimeFaces，如@BalusC stated，您可以使用 JavaScript/jQuery 代码，如下所示：

var placeholder = "e.g. +358 (11) 123-45-67"
$("input").on({
    focus: function() {
        if (this.value == placeholder) {
            $(this).val("").removeClass("shadow");
        }
    },
    blur: function() {
        if (this.value == "") {
            $(this).val(placeholder).addClass("shadow");
        }
    }
}).trigger("blur");

CSS 类 shadow 具有字体 color: #bbb。

演示： http://jsfiddle.net/rYAbU/

【讨论】：

您的示例非常好，但我在这里看到了一个问题。我需要存储这个值 - 例如+994 (12) 491 2345 进入数据库表。如何将此值从 JSF getter 传递给 JavaScript？