HTML自动对焦无法正常运行,脚本尚未解决

时间:2018-11-04 19:40:33

标签: javascript jquery html

我的密码输入字段使用“自动对焦”属性,但没有自动对焦。我怀疑某些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>

0 个答案:

没有答案