Я пытался автоматически сфокусироваться на поле ввода под названием #to после того, как кто-то нажал на мою кнопку «поделиться».
В настоящее время все прекрасно работает с акцией. (т. е. пользователь нажимает «Поделиться», появляется модальное окно, оно щелкает в любом месте вне поля, и оно закрывается. Все замечательно).
Проблема в том, что когда я добавляю функцию focus () к блоку, она работает нормально и фокусируется в правильном поле ввода, но когда я щелкаю в любом месте за пределами поля, чтобы закрыть его, кнопка «Поделиться» переключается ( и становится скрытым).
Это переключение фокуса ввода (кто-то здесь предложил использовать переключатель)
$(".share-this").toggle("fast", function() {
$("#to").focus();
});
Это весь мой код
// this is for the share
$(document).ready(function() {
// user clicks on report this button
$(".share-this").click(function() {
$(".share-this").toggle("fast", function() {
$("#to").focus();
});
// confirmation fades in
$(".share-box").fadeIn("fast"),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
return false;
});
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
});
Я подозреваю, что это связано с кодом, закрывающим окно после того, как щелкнуло где-нибудь за пределами поля
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
Есть идеи, что не так?
РЕДАКТИРОВАТЬ: Это то, о чем я говорю:
РЕДАКТИРОВАТЬ 2: Это HTML
<li><a class="share-this">Share</a></li>
<div class="share-box">
<div class="share-arrow"></div>
<ul class="share-sites">
<li><a class="facebook">Facebook</a></li>
<li><a class="twitter">Twitter</a></li>
<li><a class="reddit">Reddit</a></li>
<li><a class="digg">Digg</a></li>
<li><a class="delicious">Delicious</a></li>
<li><a class="stumbleupon">StumbleUpon</a></li>
</ul>
<div class="sep"></div><p>
<?
echo "<form class=\"form\" autocomplete=\"off\" method=\"post\" action=\"\">";
echo "<label class=\"label-share\" id=\"lto\" for=\"email\">To</label>";
echo "<input class=\"input-short\" id=\"to\" type=\"text\" name=\"to\">";
echo "</form>";
}
?>
</div>
РЕДАКТИРОВАТЬ 3: Получил это на работу. Вот обновленный код. Заменили селектор и функцию переключения на fadeIn ().
// this is for the share
$(document).ready(function() {
// user clicks on report this button
$(".share-this").click(function() {
$(".share-box").fadeIn("fast", function() {
$("#to").focus();
});
// confirmation fades in
$(".share-box").fadeIn("fast"),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
return false;
});
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
});