Question

我有一个最初隐藏的文本框。但是，当您单击按钮时，它会显示一个文本框，我希望焦点自动转到现在可见的文本框。我希望光标在那里开始闪烁。我尝试过自动对焦但是没有用。

Answer 1

让我们说你的HMTL就像是

<textarea id="ta"></textarea>
<button id="showta">Show the box</button>

然后使用jQuery

$('#showta').on('click',function(e){
    // display and focus
    $('#ta').show().focus();
});

with vanilla js

var ta = document.getElementbyId('ta'),
    btn = document.getElementbyId('showta');
btn.addEventListener( 'click', function(e){
    ta.style.display = 'block';
    ta.focus();
});

如果它不起作用，您可能需要为其添加超时。 var timeout = 100;任意数字＆gt; 0.然后在处理程序中：

clearTimeout(timeout);
timeout = setTimeout(function(){
    $('#ta').focus();
    // or ta.focus();
});

Answer 2

单击按钮（显示文本框）后，按

调整输入元素

$('yourinputfiled').focus();

谢谢！

Answer 3

您可以使用display block / none显示/隐藏，而不是使用visibility：hidden / opacity = 0。

希望它能起作用:)

＆＃13;

$(document).ready(function(){
$('.span_click').click(function(){
				$('.show_search').addClass('visible_now');
        $('#set_focus').focus();
	});
});

＆＃13;

.show_search {
    background: #fff;
    //opacity: 0;
    display:none;
    padding: 0 30px;
    //visibility: hidden;
    -webkit-transition: visibility 500ms ease 0.3s;
    -moz-transition: visibility 500ms ease 0.3s;
    -o-transition: visibility 500ms ease 0.3s;
    transition: visibility 500ms ease 0.3s
}
.visible_now {
    //opacity: 1;
    display:block;
    visibility: visible;
    -webkit-transition: visibility 500ms ease 0.3s;
    -moz-transition: visibility 500ms ease 0.3s;
    -o-transition: visibility 500ms ease 0.3s;
    transition: visibility 500ms ease 0.3s;
    z-index: 2
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="search_trigger" class="span_click"><span class="search_discovery">Search</span> </span>

<div class="show_search">
				<input class="" id="set_focus" type="search" placeholder="Search"/>
			</div>

＆＃13;

如何在隐藏文本框可见时立即显示闪烁的光标

3 个答案: