关于jsf：h：commandbutton与h：commandlink

h:commandbutton vs h:commandlink

我们正在使用JSF-2.1.7并以所有形式发布请求。我试图证明是使用<h:commandButton>还是<h:commandLink>。 <h:commandLink>(href )的外观可以使用样式和jQuery进行控制。

推荐使用哪个<h:commandButton>或<h:commandLink>？有什么真正的优势吗？

除了生成的标记和外观之外，没有功能上的区别。 <h:commandButton>生成HTML <input type="submit">元素，而<h:commandLink>生成HTML 元素，该元素使用JavaScript提交表单。两者都将用于提交表格。其他样式与功能无关。

如果需要提交按钮，请使用<h:commandButton>；如果需要提交链接，请使用<h:commandLink>。如果那对您没有意义，那么我不知道。如果您不能决定使用哪一种，只需选择在UIangular最有意义的一种即可。询问网页设计师是否不

<h:commandLink>和<h:outputLink>之间的区别更有趣。这在此处得到了详细解答：我何时应该使用h：outputLink代替h：commandLink？

简而言之，我的建议是将<h:commandButton type="submit">用于主要(默认)提交按钮，将<h:commandLink>用于其他任何按钮(例如，过滤器，排序，查找，预览，生成密码等)的混合。

冗长的解释如下：

首先，有一些背景知识：人们可能还应该意识到不同的<h:commandButton> type属性。 (type属性直接转换为生成的<input type="">属性。)我在任何地方都没有明确声明此内容，但是一些测试表明：

type="submit"(如果省略，则默认为默认值)执行表单的正常"提交"行为(即，POST表单)以及action和/或actionListener。
type="reset"执行正常的"重置"行为(即清除/重置表单字段)，而无需调用任何action和/或actionListener。
type="button"生成一个按钮(显然<input type="button">比<button>标记受限制)，而不调用任何action和/或actionListener。

除了重置字段外，后两个字段似乎仅对激活例如Javascript。他们不发布表单。

所以要回答这个问题：在表单上下文中：

<h:commandButton>(等效于<h:commandButton type="submit">，请记住)通常是最有用的，尤其是当大多数浏览器现在都实现了按下Enter时激活形式在DOM树中找到的第一个提交按钮。这可能会改善您的表单的用户体验

例如使用以下命令登录会更快：

用户名Tab密码Enter

与

相对

用户名Tab密码...将手从键盘移到鼠标，搜寻指针并定位在按钮上，单击。

还请记住，Tabing仍然可以通过键盘访问任何<input>按钮(可选的CSS样式)，直到(CSS样式的按钮)获得焦点，然后单击Spacebar。

但是，对于应该执行其他操作而不是提交(或"只是"清除字段")表单上的其他按钮，<h:commandLink>更合适。仍然可以通过键盘通过Tabing达到此目的，直到(CSS样式为按钮)具有焦点，然后再设置Enter。请注意，这与使用<h:commandButton>生成的按钮不一致，该按钮可能采用CSS样式，以使其看起来相同，但浏览器的处理方式不同(Tab ... Spacebar)。

这是一般的解释，但是您可能需要注意一些问题...

当表单上没有<h:commandButton type="submit">按钮时，只有<h:commandLink>按钮(甚至根本没有按钮)，当用户按下Enter时，表单仍会提交，但是没有action{Listener}正在运行。这可能不是什么大问题，因为表单值存储在后备bean中，并在页面加载时再次显示，因此除了服务器往返之外，用户通常不会注意到任何不妥之处。但这可能不是您希望Enter的处理方式...。目前，我能想到的唯一方法是在表单上放置一个onSubmit事件，该事件可通过Javascript激活默认的<h:commandLink>按钮.... Arghhhh !!

您还应该确保CSS样式选择器是正确的。

A.mystyle适用于<h:commandLink>;
INPUT[type=submit].mystyle至<h:commandButton type="submit">;
INPUT[type=reset].mystyle至<h:commandButton type="reset">;
INPUT[type=button].mystyle至<h:commandButton type="button">;

这些当然可以用逗号连接起来作为单个样式定义的选择器。或者，如果您想冒把其他样式设置为mystyle按钮的风险，则可以省略A / INPUT说明符。但是，我已经按照上面的样式设置了按钮的样式，以便也可以使用以下样式：

SPAN.mystyle定义，用于禁用链接或按钮的时间(例如，通过disabled属性)-这使您可以为禁用的按钮提供淡化(灰色)外观。

我还遇到了一些高度差异(按钮上的行高与链接上的内容高-如果您的按钮包含背景图像作为图标而不是文本，则可能会出现问题)，并且:before / :after伪类被处理。我的意思是：在<h:commandButton>和<h:commandLink>上测试并重新测试CSS，以确保它们看起来(本质上)相同！

这是我的摘要备忘单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

JSF <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
type="submit"> type="reset"> type="button">

Translates to <input <input <input
type="submit"> type="reset"> type="button">
Submit form POST no, clears flds no POST
Javascript events YES YES YES YES
action{Listener} YES no no YES
Enter on form activates YES no no no
Tab...+Enter activates YES(*) YES YES YES
Tab...+Space activates YES(*) YES YES no
Highlight on Tab-focus:
- Firefox 32 YES no no no
- Chrome 41 YES YES YES YES
- Internet Explorer 11 YES YES YES YES
- Opera 28 YES YES YES no(*)

(*=Opera 28 seems not to allow tabbing (or Alt+Arrow) to hyperlinks to activate them.)