Блог

Главная - Вопросы по программированию - Я не могу вводить на входные данные

Я не могу вводить на входные данные

#jquery #jquery-ui #jquery-ui-sortable

#jquery #jquery-пользовательский интерфейс #jquery-пользовательский интерфейс-сортируемый

Вопрос:

У меня есть список, который можно сортировать. Я использую пользовательский интерфейс jQuery с виджетами, мышью, позицией, сортируемыми дополнениями.

CSS — файл:

 #sortable{
    width : 550px;
    display: inline-block;
}
#sortable li, #add {
    width : 550px;
    margin : 5px;
    padding : 5px;
    height : 50px;
}
#sortable li img.social-icon, #sortable li img.drag-cursor {
    width: 40px;
    height : 40px;
    float : left;
}
#sortable li img.social-icon {
    margin-right : 5px;
}
#sortable li img.drag-cursor {
    margin-left : 5px;
    cursor : move;
}
#sortable li input {
    height:40px;
    width:450px;
    line-height: 45px;
    float:left;
}
#add {
    cursor : pointer;
    text-align: center;
    line-height: 45px;
}
.ui-state-highlight { height: 50px; line-height: 50px; }

HTML:

 <div id="dash-wrapper">
    <ul id="sortable">
        <li class="ui-state-default">
            <img src="images/social/twitter.png" class="social-icon" />
            <input type="text" value="textt" name="user-media-link[]" class="user-media-link">
            <input type="hidden" name="social-media-type" value="1">
            <img src="images/drag.png" class="drag-cursor">
        </li>
        <li class="ui-state-default">
            <img src="images/social/facebook.png" class="social-icon" />
            <input type="text" value="textt" name="user-media-link[]">
            <input type="hidden" name="social-media-type" value="1">
            <img src="images/drag.png" class="drag-cursor">
        </li>
        <li class="ui-state-default">
            <img src="images/social/rss.png" class="social-icon" />
            <input type="text" value="textt" name="user-media-link[]">
            <input type="hidden" name="social-media-type" value="1">
            <img src="images/drag.png" class="drag-cursor">
        </li>
    </ul>
    <div class="ui-state-default" onCLick="addNewSocial(); return false;" id="add">ADD</div>
</div>

Скрипт:

 $(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-highlight"
    });
    $("#sortable").disableSelection();
});

function addNewSocial() {
    $("#sortable").append('<li class="ui-state-default"><img src="" width="100" height="100" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"></li>');
}

Это работает очень хорошо, но я ничего не могу ввести на входные данные. Я могу добраться до них только с помощью кнопки TAB. Когда я нажимаю на них, ничего не происходит. Вы можете увидеть живой пример.

Я прочитал все вопросы, связанные с этим вопросом, но я не смог найти правильного ответа.

Проверка W3 в порядке 
В Firebug нет никакой ошибки 
Операционная система : Ubuntu 11.04 
Браузер: Firefox

Ответ №1:

Это происходит потому, что у вас есть $("#sortable").disableSelection(); . Удалите его, и все будет работать нормально.

http://jsfiddle.net/KbBnu/1/

Комментарии:

1. Я не могу найти поток с моим решением, но у кого-то была такая же проблема при использовании disableSelection() . Обходным решением может быть, если вы привяжете mousedown событие к своим входным данным и вызовете stopPropagation() следующим образом: $('input[type="text"]').mousedown(function(e){ e.stopPropagation(); }); Таким образом, вы также сохраняете преимущество disableSelection() .

2. @DarthJDG, ты потрясающий… Для меня удаление disableSelection() вообще не было решением. Но ваше решение действительно сработало как шарм. Большое вам спасибо!!

3. Я буду рад, если вы объясните, почему это происходит. В любом случае, это работает как шарм. Большое вам спасибо за эту помощь.

Ответ №2:

Если вы хотите запретить выделение текста, но при этом продолжать использовать входные данные, вам следует попробовать следующее

 $('body *').not(':has(input)').not('input').disableSelection();

Ответ №3:

Просто сделай:

 $( "#sortable_container_id input").click(function() { $(this).focus(); });

и замените sortable_container_id идентификатором элемента, который является контейнером всех «сортируемых» элементов.