Понедельник, 12 Ноября 2012 16:05

Редактируемый блок

Written by 
Оцени эту запись
(2 Голоса)

Сделаем редактируемый блок при помощи JavaScript

 

Я уже писала о том, что можно сделать редактируемый блок при помощи атрибута contenteditable (Редактируемый блок), а теперь сделаем аналогичную версию редактируемости, но при помощи JavaScript.

 

Допустим, есть у нас нужный блок, у него есть идентификатор:

 

<div id="editable" tabindex="1"></div>

 

Ему также добавили атрибут tabindex, который дает нашему блоку фокус.

 

Задаем блоку стили, требования к стилям отсутствуют:

 

 

#editable {
            width: 200px;
            height: 30px;
            margin: 0 auto;
            background: #eee;
            border: 1px solid blueviolet;
            color: blueviolet;
}
 
А теперь вешаем на наш блок событие keydown:
 
 
document.body.onload = function () {
            var a = document.getElementById('editable');
            a.addEventListener('keydown', function (e) {
                if (e.keyCode === 13 || e.keyCode === 27) {
                    this.blur();
                } else {
                    this.innerHTML += String.fromCharCode(e.keyCode);
                }
                if (e.keyCode === 46) {
                    this.innerHTML = '';
                }
            });
 }
 
При нажатии клавиши клавиатуры, мы мовим код этой клавиши.
 
При нажатии Esc или Enter, убираем из блока фокус. Здесь я руководствовалась тем, что при нажатии на Esc, мы выходим(передумали вводить текст). А при нажатии Enter мы ввели все, что хотели, и закончили ввод.
 
При нажатии на Del, я очищаю содержимое контейнера.
 
Смотрим и вводим текст в наш блок:

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов