我的密码输入字段使用“自动对焦”属性,但没有自动对焦。我怀疑某些javascript或jquery可以解决该问题,因此我尝试了许多在网上文章中找到的脚本置换来解决此问题,但仍未解决。
下面是html代码的最低版本。电子邮件输入字段具有“自动对焦”属性,页面上还有其他四个脚本,但是没有一个脚本会导致自动对焦。浏览器是Firefox,最新版本,因此浏览器支持不是问题。
html代码:
<form name="thisform" id="thisform">
<div class="EMail_Pwd">
<input type="text" class="signup_join" autofocus placeholder="Your email address" id="email_field" name="email_field" style="width:55%; margin-left: 0%" required>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("email_field").focus();
}
</script>
</div>
<script>
$('input[name="email_field"]').focus();
</script>
<div class="EMail_Pwd">
<input type="password" placeholder="Your password 8 characters minimum" class="signup_join" minlength="8" name="passwd" style="width:55%; margin-left: 0%" required></div><br><br>
</form>
<script>
var x = document.getElementById("email_field").autofocus;
</script>
<script>
$(document).ready(function(e) {
$("#email_field").focus();
});
</script>
相关的CSS:
.EMail_Pwd{
font-family: CamphorW01-Thin, sans-serif;
font-size: 13pt;
input size: 200px;
}
.signup_join{
border-radius: 15px;
border-style: ridge;
border-color: rgb(250,250,250);
border-width: 1px;
background-color: black;
height: 60px;
text-align: center;
font-family: CamphorW01-Thin, sans-serif;
font-size: 18pt;
font-family: camphorW01-Thin,calibri,arial;
font-size: 12pt;
autofocus: true;
}
.signup_join{
border-radius: 15px;
border-style: ridge;
border-color: rgb(250,250,250);
border-width: 1px;
background-color: black;
height: 60px;
text-align: center;
font-family: camphorW01-Thin,calibri,arial;
font-size: 18pt;
}
在开发控制台中没有任何有关脚本的内容。我不明白为什么“自动对焦”属性不够,但是在这种情况下还不够。
预先感谢您的任何想法。
编辑:我发现应用以下脚本表明电子邮件字段确实具有焦点,但是现在我唯一的问题是光标未定位在该字段中,因此最终用户不知道其焦点。
现在我正在尝试定位光标。
此脚本设置焦点:
<script>
$(document).ready(function(e) {
$("#email_field").focus();
});
此脚本检查以查看该字段是否具有焦点(确实如此)。
<script>{
var hasFocus = $('#email_field').is(':focus');
var output = "Focus = " + hasFocus;
console.log(output);
}
</script>