这会产生无法在JavaScript或CSS中使用而无法使用黑客的标记，通常应视为无效：
< a href =javascript：void（0）; ID = ：FOO：栏：baz 的 - 实施例< / A>id =：bar：baz：foo属性包含了冒号，这对于这个属性来说不是一个有效的字符。
虽然属性可以根据规范有效，它无法与现实世界的JavaScript和CSS实现一起工作。
简而言之，JSF中的默认 id 属性生成对于前端开发是不可用的。
解决方案：因为这是唯一明智的分隔符，可以保证最终用户不会意外地在JSF组件ID中使用它（这是已验证）和，可以在CSS中使用它使用 \ 。
转义选择器。请注意， HTML4规范指出冒号在有效值中 id 和 name 属性。因此，您抱怨它与网络标准不兼容。
ID 和 NAME 标记必须以字母（[A-Za-z]）开头，后面跟随任意数量的字母，数字（[0-9]），连字符（ - ），下划线（ b
唯一的问题在于，，冒号（：）和句号（。）。 code>：是需要转义的CSS选择器中的特殊字符。 JS对冒号没有问题。 document.getElementById（foo：bar）完美无缺。唯一可能的问题是在jQuery中，因为它使用CSS选择器语法。
如果您确实需要，则可以随时更改默认分隔符 ：通过将 javax.faces.SEPARATOR_CHAR 上下文参数设置为eg - 或 _ 如下。您只需要保证您不会在JSF组件标识自己的任何地方使用该字符（它尚未验证！）。
< context-param> < param-name> javax.faces.SEPARATOR_CHAR< / param-name> < param-value> - < / param-value> < / context-param>_ 缺点是它出现在JSF自动生成的ID（如 j_id1 ）中，因此您还应该确保全部 NamingContainer 组件遍及您的JSF页面一个固定的ID而不是一个自动生成的ID。否则，JSF在查找命名容器子项时会遇到问题。
我只会不推荐它。这是长期困惑和脆弱。再想一想，平均JSF webapp中的独特元素本身通常不在表单或表格中。他们通常只是代表主要的布局方面。我想说，这是一般的HTML / CSS视角的糟糕设计。只需通过可重用的CSS类名称而不是ID选择它们即可。如果您确实需要，您可以始终将其封装在纯HTML < div> 或< span> 其ID不会被JSF预先设置。
另见：- 什么是HTML中的id属性的有效值？
- 是否可以更改JSF中的元素ID分隔符？
- 如何使用jQuery选择JSF组件 /stackoverflow/questions/5878692/how-to-use-jsf-generated-html-element-id-in-css-selectors\">如何使用JSF生成的HTML元素ID和冒号：在CSS选择器中？
- 将JavaScript集成到JSF复合组件中，干净的方式
Can someone who is an active JSF (or Primefaces) user explain why by default this happens why nobody is doing anything about it:
<p:commandLink id="baz" update=":foo:boop" value="Example" />Which generates markup that cannot be used in JavaScript or CSS without hacks and should generally be considered invalid:
<a href="javascript:void(0);" id=":foo:bar:baz">Example</a>The id=":bar:baz:foo" attribute here contains colons, which aren't a valid character for this attribute, at least from CSS perspective.
While the attribute may be valid according to spec, it fails to work with real-world JavaScript and CSS implementations.
In short, default id attribute generation in JSF is unusable for front-end development.
解决方案The : is been chosen because that's the only sensible separator character for which can be guaranteed that the enduser won't accidently use it in JSF component IDs (which is been validated) and that it's possible to use it in CSS selectors by escaping it with \.
Note that the HTML4 spec says that the colon is a valid value in id and name attribute. So your complaint that it isn't compatible with "web standards" goes nowhere.
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
The only problem is thus that the : is a special character in CSS selectors which needs to be escaped. JS has at its own no problems with colons. The document.getElementById("foo:bar") works perfectly fine. The only possible problem is in jQuery because it uses CSS selector syntax.
If you really need to, then you can always change the default separator character : by setting the javax.faces.SEPARATOR_CHAR context param to e.g. - or _ as below. You only need to guarantee that you don't use that character anywhere in JSF component IDs yourself (it's not been validated!).
<context-param> <param-name>javax.faces.SEPARATOR_CHAR</param-name> <param-value>-</param-value> </context-param>The _ has by the way the additional disadvantage that it occurs in JSF autogenerated IDs like j_id1, thus you should also ensure that all NamingContainer components throughout your JSF pages have a fixed ID instead of an autogenerated one. Otherwise JSF will have problems finding naming container children.
I would only not recommend it. It's in long term confusing and brittle. To think about it again, unique elements in the average JSF webapp are by itself usually already not inside forms or tables. They generally just represent the main layout aspects. I'd say, it's otherwise a bad design in general HTML/CSS perspective. Just select them by reusable CSS class names instead of IDs. If you really need to, you can always wrap it in a plain HTML <div> or <span> whose ID won't be prepended by JSF.
See also:- What are valid values for the id attribute in HTML?
- Is it possible to change the element id separator in JSF?
- How to select JSF components using jQuery?
- How to use JSF generated HTML element ID with colon ":" in CSS selectors?
- Integrate JavaScript in JSF composite component, the clean way
更多推荐
默认情况下,JSF生成不可用的ID,它与Web标准的CSS部分不兼容
发布评论