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

Question

[Евгений]

Добрый день. Прошу помочь\подсказать.
Есть задача. Сетка данных. В сетке, при клике на ячейку, должен подавляться input, куда можно внести значения или который будет содержать значения из ячекйи, если оно там было до клика. Естественно в input значение можно менять а после клика по другой ячейки или по свободной области input удаляется и остается только значение в блоке.

Answer 1

[Евгений]

Решение было найдено. Частично доработанное, частично подсмотренное. https://jsfiddle.net/66pep87e/

Answer 2

[Stalker_RED]

Можно не создавать никакие инпуты, а использовать contenteditable
jsfiddle.net/seh1m0jL

Comments

[Евгений]

можно было бы, я бы на inputax все выстроил, но нельзя

Answer 3

[Maxim Nepritimov]

Надеюсь что правильно понял автора клик.
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();
});