Java 如何在JSF输入字段中创建阴影_Java_Javascript_Css_Jsf_Jsf 2

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

java javascript css jsf jsf-2

Java 如何在JSF输入字段中创建阴影,java,javascript,css,jsf,jsf-2,Java,Javascript,Css,Jsf,Jsf 2,我在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-transiti

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


var placeholder=“测试字段”
$（“输入”）。在({
焦点：函数（）{
if（this.value==占位符）{
$（this.val（“”）.removeClass（“阴影”）；
}
},
模糊：函数（）{
如果（this.value==“”）{
$（this.val（占位符）.addClass（“阴影”）；
}
}
}).触发（“模糊”）；            
带阴影的JSF2文本框示例

我测试了这段代码，但它不起作用。也许我需要将JavaScript代码作为函数调用到

标记中？

我认为他们正在使用jquery的水印来实现这一点。附件是该页面的firebug视图，其中显示

这是自HTML5以来的新功能。这是

占位符

属性，在HTML5时代之前也称为“水印”

当然，这只适用于支持HTML5的浏览器。当使用JSF时，这只适用于支持新HTML5

placeholder

属性的JSF组件。标准JSF

在本机上还不支持这一点。您需要寻找支持此功能的第三方组件库。其中包括其组成部分：

这将检查HTML5是否受支持，然后使用

占位符

，否则它将引入一些JS/jQuery魔术来模拟相同的功能。这一切都不是由CSS完成的

如果出于某种原因，使用PrimeFaces不是一个选项，那么您需要在自定义组件和/或JS/jQuery的自定义部分中重新设计它，就像

在封面下所做的那样。

如果您无法使用PrimeFaces，那么您可以使用如下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

具有字体

颜色：#bbb

演示：

您的示例非常好，但我发现了一个问题。我需要将此值存储到数据库表中，例如

+994（12）4912345

。如何将这个值从JSF getter传递到JavaScript？我有一个问题，我不确定如何实现。我想使用@VisioN发布的示例。我不知道如何将这个值

例如+994（12）4912345

从JSF getter传递到JavaScript代码，因为我想将这个值存储到数据库中？这可能吗？当然可能。JSF是一个HTML代码生成器。只要让JSF打印这个值，就像它是一个JS变量一样。我想问一下

@VisioN

发布的代码。我将代码插入到简单的JSP页面中，但当我在Firefox中打开它时，影子不起作用。我怀疑我必须从

字段调用JavaScript代码？但是，调用JavaScript代码必须使用什么属性，以及我必须如何向它发送参数，以便在每个输入字段中有不同的阴影？让JSF相应地打印HTML/JS代码即可。例如，

var foo='{bean.foo}'等等。您似乎无法理解JSF在webserver上运行并生成HTML/JS代码，而HTML/JS又在webbrowser上运行。JSF和HTML/JS不是同步运行的。是的，现在我明白你的意思了。我认为我只能在html代码中调用托管bean。不要介意。我在帖子中测试了代码，但它不起作用。