@dragonesis

Как при клике по блоку вытащить значение из блока в input и после клика по свободной области input убрать оставив значение?

Добрый день. Прошу помочь\подсказать.
Есть задача. Сетка данных. В сетке, при клике на ячейку, должен подавляться input, куда можно внести значения или который будет содержать значения из ячекйи, если оно там было до клика. Естественно в input значение можно менять а после клика по другой ячейки или по свободной области input удаляется и остается только значение в блоке.
  • Вопрос задан
  • 245 просмотров
Решения вопроса 1
@dragonesis Автор вопроса
Решение было найдено. Частично доработанное, частично подсмотренное. https://jsfiddle.net/66pep87e/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
Можно не создавать никакие инпуты, а использовать contenteditable
jsfiddle.net/seh1m0jL
Ответ написан
nepritimov_m
@nepritimov_m
Frontend dev.
Надеюсь что правильно понял автора клик.
HTML:
<div class="cells">
    <div class="js-cells-elem" data-cellscount="1">1</div>
    <div class="js-cells-elem" data-cellscount="2">2</div>
    <div class="js-cells-elem" data-cellscount="3">3</div>
    <div class="js-cells-elem" data-cellscount="4">4</div>
    <div class="js-cells-elem" data-cellscount="5">5</div>
    <div class="js-cells-elem" data-cellscount="6">6</div>
</div>

<input type="text" class="js-hidden-input" style="display:none;"/>


CSS:
.cells div {
    margin: 1px;
    border: solid 1px gray;
    width: 40%;
    float: left;
    height: 30px;
}


JS:
var myTable = $('.cells'),
    cellsElem = myTable.find('.js-cells-elem');

cellsElem.on('click', function () {
    var $this = $(this),
        myText = $this.text(),
        myTextId = $this.data('cellscount'),
    	myInput = $('.js-hidden-input');

    myInput.
    	val(myText).
    	show().
    	attr("data-id", myTextId).
    	focus();
});

$('.js-hidden-input').on('blur', function () {
    var $this = $(this),
        myInputId = $this.attr('data-id'),
        myCells = $('.js-cells-elem').filter('[data-cellscount="' + myInputId + '"]');

    myCells.text($this.val());
    $this.hide();
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы