Блог

Главная - Вопросы по программированию - Редактировать с помощью textarea -> как сохранить заполнитель?

Редактировать с помощью textarea -> как сохранить заполнитель?

#jquery #textarea #placeholder

#jquery #текстовая область #плейсхолдер

Вопрос:

Прежде всего, что у меня есть: простой div, который по щелчку переключается на текстовую область. Заполнителем текстовой области является значение, которое div имел раньше.

 <div class="class" id="test">Test</div>

text = $('#test').text();
$('#test').replaceWith('<textarea onkeyup="update_textarea(this)" 
id="test"  placeholder="'   text   '" />');

Функция updateTextarea делает вновь вставленный текст доступным в качестве значения (означает, что я могу использовать вставленный текст позже снова).

Теперь, чего мне не хватает или чего я хочу: когда я нажимаю на свой div с помощью value Test, он будет доступен для редактирования (потому что это больше не div, это текстовая область). Проблема в том, что заполнитель правильный, но когда я щелкаю внутри текстовой области, чтобы вставить новый текст, заполнитель удаляется, текстовая область пуста. Как я мог предотвратить это, сохранив заполнитель в качестве значения в текстовой области?

Должно быть что-то с onFocus, я думаю… но как его сохранить.

Спасибо

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

1. вот как placeholder должно работать это визуальное приглашение, которое удаляется, когда пользователь переходит к полю. Если вы хотите, чтобы в поле было редактируемое значение, вместо этого используйте value атрибут.

Ответ №1:

Может быть, это поможет вам. Добавьте это после $('#test').replace... 

 $('#test').one('focus',function(){
       $(this).text(text)
    })

проверьте здесь http://jsfiddle.net/a8AA5 /

Ответ №2:

Атрибут заполнителя предназначен для исчезновения, как только пользователь вводит текст в input , поэтому в этом случае он работает так, как задумано. Я подозреваю, что вместо этого вы хотите применить текст к textarea элементу; и для этого я бы предложил следующее:

 $('#test').live('click',
    function(){
        $(this).replaceWith('<textarea>'   $(this).text()   '</textarea>');
    });

$('textarea').live('blur',
    function(){
        $(this).replaceWith('<div id="test" class="class">'   $(this).text()   '</div>');
    });

Демонстрация JS Fiddle.

Ссылки:

Ответ №3:

Проверьте это

     $("#test").live('click',function(){
    var text = $('#test').text();
    //var text = $('#test').html(); // use this for html tags also
        $('#test').replaceWith('<textarea id="test2">'   text   '</textarea>');
})
$("#test2").live('blur',function(){
        var text2 = $('#test2').val();
        $(this).replaceWith('<div id="test">'   text2   '</div>');
});
    <div id="test">Test</div>

Проверьте в jsFiddle

 http://jsfiddle.net/VbSV5/