如何在JSF输入字段中创建阴影
[英]How to create shadow in JSF input field
问题描述
我将帐户注册到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>标记中？
3 个解决方案
解决方案1
5 已采纳 2012-05-07 22:06:31
这是HTML5以来的新功能。 它是placeholder属性，在HTML5时代之前也被称为“水印”。
<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />
这当然仅适用于支持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" />
这将检查是否支持HTML5然后使用placeholder ，否则它将引入一些JS / jQuery魔术来模拟相同的。 这一切都不是由CSS完成的。
如果由于某种原因使用PrimeFaces不是一个选项，你需要自己重新发明它自定义组件和/或自定义JS / jQuery的味道，就像<p:watermark>正在做的事情。
解决方案2
2 2012-05-07 22:03:19
我认为他们正在使用jquery的水印这样做。 附件是该页面的萤火虫视图，显示了这一点
解决方案3
2 2012-05-07 22:18:52
如果您无法使用PrimeFaces，如@BalusC所述 ，您可以使用这样的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/
JSF如何生成表单输入字段的名称？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.