如何使用jQuery专注于页面加载时的表单输入文本字段?

2020/10/10 22:01 · javascript ·  · 0评论

这可能很简单,但是有人可以告诉我如何使页面加载时文本框上的光标闪烁吗?

将焦点放在第一个文本字段上:

 $("input:text:visible:first").focus();

这也做第一个文本字段,但是您可以将[0]更改为另一个索引:

$('input[@type="text"]')[0].focus(); 

或者,您可以使用ID:

$("#someTextBox").focus();

您可以为此使用HTML5autofocus您不需要jQuery或其他JavaScript。

<input type="text" name="some_field" autofocus>

请注意,这不适用于IE9及更低版本。

当然:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

为什么每个人都使用jQuery这样简单的东西。

<body OnLoad="document.myform.mytextfield.focus();">

在执行此操作之前,请考虑一下用户界面。我假设(尽管没有一个答案这么说)您将在使用jQueryready()函数加载文档时执行此操作如果用户在文档加载之前就已经将焦点放在另一个元素上(这是完全有可能的),那么将焦点偷走对他们来说是非常烦人的。

您可以通过onfocus在每个<input>元素中添加属性来记录用户是否已经集中在表单字段上,然后检查是否具有以下条件,来进行检查:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

HTML:

  <input id="search" size="10" />

jQuery的:

$("#search").focus();

很抱歉碰到一个老问题。我是通过Google找到的。

还值得注意的是,可以使用多个选择器,因此您可以定位任何表单元素,而不仅仅是一个特定类型。

例如。

$('#myform input,#myform textarea').first().focus();

这将重点关注它找到的第一个输入或文本区域,当然,您也可以将其他选择器添加到混合中。如果不能确定某个特定的元素类型是第一个,还是想要一些通用的/可重用的内容,请尝试。

这是我更喜欢使用的:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

输入后放置

<script type="text/javascript">document.formname.inputname.focus();</script>

实现此目的的最简单方法

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

单行$('#myTextBox').focus()不会将光标放在文本框中,而是使用:

$('#myTextBox:text:visible:first').focus();
本文地址:http://javascript.askforanswer.com/ruheshiyongjqueryzhuanzhuyuyemianjiazaishidebiaodanshuruwenbenziduan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!