Javascript 如何使提交按钮显示为链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4628958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a submit button display as a link?
提问by Will Curran
This is not working in IE:
这在 IE 中不起作用：
.text-button { background: transparent;
text-decoration: none;
cursor: pointer; }
<input type="submit" class="text-button" value="vote+"/>
It displays a square button.
它显示一个方形按钮。
回答by Vishal
Copied from this linkyou can make your button look like a link -
从这个链接复制，你可以让你的按钮看起来像一个链接 -
.submitLink {
background-color: transparent;
text-decoration: underline;
border: none;
color: blue;
cursor: pointer;
}
submitLink:focus {
outline: none;
}<input type="submit" class="submitLink" value="Submit">回答by labue
<form name='test'>
<a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
回答by jahu
I needed to prepare a post redirect page and since those rely on submitting forms, I needed to place something on them to make them work even if javascript failed for some reason. If javascript fails then an anchor for submitting the form won't work either. I had to actually format the button to look like a link (so the redirect page looks like one). I based my solution on what Vishal wrote, but I made some small alterations to make it look better inline. Here is the result.
我需要准备一个帖子重定向页面，因为这些页面依赖于提交表单，所以我需要在它们上面放置一些东西以使它们工作，即使 javascript 由于某种原因失败。如果 javascript 失败，则用于提交表单的锚点也将不起作用。我实际上必须将按钮格式化为看起来像一个链接（因此重定向页面看起来像一个）。我的解决方案基于 Vishal 所写的内容，但我做了一些小改动以使其内联看起来更好。这是结果。
button
{
padding:0;
background-color:transparent;
text-decoration:underline;
border:none;
border:0;
color:blue;
cursor:pointer;
font-family:inherit;
font-size:inherit;
}
button::-moz-focus-inner
{
border:0;
padding:0;
}To complete the redirect <button>click here</button>.Edit: The trick for removing padding in FireFox was taken from here
编辑：在 FireFox 中删除填充的技巧取自此处
Edit2: Made button inherit font style from parent element to make it look like a valid link (previously font size and font family was different for the button).
Edit2：使按钮从父元素继承字体样式，使其看起来像一个有效的链接（以前按钮的字体大小和字体系列是不同的）。
回答by Doug Chamberlain
IMO I guess I am a difficult developer to deal with. I would suggest to the person(s) requesting this application the option of just letting it remain a button?
IMO 我想我是一个很难对付的开发人员。我会建议请求此应用程序的人选择让它保留一个按钮？
Have you/they considered the following?
您/他们是否考虑过以下问题？
- Is it best practice from a UI standpoint to use something other than a button to submit a form?
- If you do go with the CSS approach, I don't believe Safari will allow you to change to look of a button.
- If you use the
<a>tag with some javascript, then you have a form without a submit button, which may cause headaches in the future. How do you detect your submit link from your other<a>tags easily?
- 从 UI 的角度来看，使用按钮以外的其他东西来提交表单是最佳实践吗？
- 如果您确实采用 CSS 方法，我不相信 Safari 会允许您更改按钮的外观。
- 如果您将
<a>标记与一些 javascript 一起使用，那么您将拥有一个没有提交按钮的表单，这可能会在将来引起麻烦。您如何<a>轻松地从其他标签中检测到您的提交链接？
回答by SyntaxGoonoo
I believe the answer submitted above by mofolo is the more correct solution
我相信上面由 mofolo 提交的答案是更正确的解决方案
CSS styling of submit buttons to make them look like anchor tags does NOT cross browser. The text-decoration:underline style is ignored by many browser types.
提交按钮的 CSS 样式使它们看起来像锚标签不会跨浏览器。许多浏览器类型会忽略 text-decoration:underline 样式。
The best method in my experience is to use javascript on an anchor tag's onclick event.
根据我的经验，最好的方法是在锚标记的 onclick 事件上使用 javascript。
For example:
例如：
A "Delete" link on a user details form screen, with confirmation before submitting the form with an id of "userdetails"
用户详细信息表单屏幕上的“删除”链接，在提交带有“userdetails”ID 的表单之前进行确认
<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a>
回答by Chandu
Try this:
尝试这个：
<style type="text/css">
.text-button
{
background-color: Transparent;
text-decoration: underline;
color: blue;
cursor: pointer;
border:0
}
</style>
<input type="submit" class="text-button" value="vote+"/>
回答by Paul Spencer
try this:
尝试这个：
.text-button {
border: none;
background: transparent;
cursor: pointer }
回答by chustar
You can't do that to the button, since things like input elements are elements of the client browser and machine, not your CSS code.
你不能对按钮这样做，因为像输入元素这样的东西是客户端浏览器和机器的元素，而不是你的 CSS 代码。
You should use an <a href=""></a>tag that links to a javascript snippet which then submits the form for you.
您应该使用一个<a href=""></a>链接到 javascript 代码段的标签，然后该代码段会为您提交表单。
