Html 将跨度视为输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14542238/
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
Treat a span as input element
提问by SparrwHawk
Is it possible to use a span to trigger input?
是否可以使用跨度来触发输入？
e.g.
例如
<div class='btn'>
<span type="submit" aria-hidden="true" data-icon=""></span>
</div>
I may be missing something blindingly obvious but I basically just want to use an icon font as a send button.
我可能遗漏了一些非常明显的东西，但我基本上只想使用图标字体作为发送按钮。
Thanks!
谢谢！
回答by Olaf Dietsche
If you have a form, you can just call myform.submit()
如果你有表格，你可以打电话 myform.submit()
<form name="myform" method="post" action="action.php">
<div>
<label for="email">E-Mail</label>
<input type="text" id="email" name="email"/>
</div>
<div class="btn">
<span aria-hidden="true" data-icon="" onclick="myform.submit()">Submit</span>
</div>
</form>
回答by Ali Bassam
You can't put type="submit", but you can execute some Javascript codes when you click on it.
不能放type="submit"，但是点击可以执行一些Javascript代码。
JQuery
查询
<span id="mySpan"> </span>
$("#mySpan").click(function(){
//stuff here
});
Javascript
Javascript
<span id="mySpan" onclick="MyClick()"> </span>
function MyClick()
{
//stuff here
}
SPAN working as a Submit Button
SPAN 作为提交按钮工作
<input type="text" id="usernameInputField />
<input type="email" id="emalInputField />
<span id="mySpan" onclick="Register()"></span>
Now in Javascript..
现在在 Javascript..
function Register()
{
//First you need to do some validation
var username = document.getElementById("usernameInputField").value;
var email = document.getElementById("emailInputField").value;
//Password, Gender, etc...
//Then start doing your validation the way you like it...
/*if(password.length<6)
{
alert("Password is too short");
return false;
}
*/
//Then when everything is valid, Post to the Server
//This is a PHP Post Call
$.post("Register.php",{ username:username,email:email } ,function(data) {
//more codes
});
}
回答by MMB
I guess Olaf's answer is simpler than Ali's. But there is a slight problem when you wish to verify if the form has been submitted, in your php script, when using Olaf's solution.
我猜奥拉夫的回答比阿里的简单。但是，当您希望在使用 Olaf 的解决方案时，在您的 php 脚本中验证表单是否已提交时，存在一个小问题。
To circomvent this problem, just add a hidden input to confirm the form's been sent.
为了规避这个问题，只需添加一个隐藏的输入来确认表单已发送。
<form name="myform" method="post" action="action.php">
<div>
<label for="email">E-Mail</label>
<input type="text" id="email" name="email"/>
<input type="hidden" id="gustav" value="1"/>
</div>
<div class="btn">
<span aria-hidden="true" data-icon="" onclick="myform.submit()">Submit</span>
</div>
</form>
Then, in your PHP, just look for if($_POST['gustav']){ ...to confirm the form has been sent.
然后，在您的 PHP 中，只需查找if($_POST['gustav']){ ...以确认表单已发送。
That way, you can have multiple forms on one page, all gathered by the same php script, still using Olaf's solution to trigger the submit.
这样，你可以在一个页面上有多个表单，所有表单都由同一个 php 脚本收集，仍然使用 Olaf 的解决方案来触发提交。
