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

Question

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

use*_*928 3 javascript css java 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-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>

Run Code Online (Sandbox Code Playgroud)

我测试了这段代码,但它没有用.也许我需要将JavaScript代码作为函数调用到<h:inputText>标记中？

Answer 1

Bal*_*usC 5

这是HTML5以来的新功能.这是placeholder属性,在HTML5时代之前也被称为"水印".

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

Run Code Online (Sandbox Code Playgroud)

这当然仅适用于支持HTML5的浏览器.使用JSF时,这仅适用于支持新HTML5 placeholder属性的JSF组件.标准的JSF <h:inputText>本身不支持这个(尚未).您需要寻找支持此功能的第三方组件库.其中包括PrimeFaces及其<p:watermark>组件:

<h:inputText id="phone" value="#{register.user.phone}" />  
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />

Run Code Online (Sandbox Code Playgroud)

这将检查HTML5是否受支持然后使用placeholder,否则它将引入一些JS/jQuery魔法来模拟相同的.这一切都不是由CSS完成的.

如果由于某种原因使用PrimeFaces不是一个选项,你需要自己重新发明它自定义组件和/或自定义JS/jQuery的味道,就像<p:watermark>在幕后做的那样.

归档时间：	13 年，4 月前
查看次数：	2674 次
最近记录：	13 年，4 月前