Как добавить текстовое поле в div со значением с помощью jquery (редактировать на месте) - PullRequest
Новая
       18

Как добавить текстовое поле в div со значением с помощью jquery (редактировать на месте)

1 голос
/ 12 февраля 2011

Привет, я пытаюсь добавить функциональность редактирования на месте на мой сайт с помощью jquery. Я не хочу использовать плагин, поэтому моя идея заключалась в том, что, когда вы щелкаете по div, в котором есть контент, он заменяет div на текстовое поле, а затем при размытии отправляет сообщение для сохранения контента.

Пока что у меня есть событие click, но я не уверен, как заменить div текстовым полем, а затем заставить его отправляться при размытии, хотя я, вероятно, могу выяснить запрос ajax.

Любая помощь была бы отличной, спасибо. Пока это то, что у меня есть ... просто событие щелчка: 

$('.control-panel-profile-update').click(function() {
      alert('Handler for .click() called.');
    });

Ответы [ 3 ]

3 голосов
/ 12 февраля 2011

Это не полностью написано, и это может не совсем работать, но оно того стоит. Удачи: 

$('.control-panel-profile-update').live('click', function() {
  $(this).replaceWith('<input type="text" id="inlineEdit" value="' + $(this).html() + '" />');

  $('#inlineEdit').focus().live('blur keyup', function(event) {
    if (event.keyCode && event.keyCode != 13) return false;

    $(this).replaceWith('<div class="control-panel-profile-update">' + $(this).val() + '</div>');
  });
});

Вот скрипка: http://jsfiddle.net/Af6X6/2/. Я также добавил поддержку клавиши enter.

3 голосов
/ 12 февраля 2011

Есть два способа сделать это: в современных браузерах вы можете использовать contenteditable = true, а затем при размытии отправлять новое содержимое по пути Это избавляет от необходимости менять текстовую область. 

<div contenteditable="true">Some Text</div>

или вы можете сделать это способом js.

http://jsfiddle.net/2RyT2/23/

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
            $(this).replaceWith($("<textarea></textarea>").text($(this).text()).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).text($(this).val()));}));
    });
});
0 голосов
/ 12 февраля 2011

Одним из решений является добавление скрытого div с текстовым полем в нем. 

<div style="display:none; id="textbox_container">
<textarea id="box"></textarea>
</div>

Затем в функции щелчка вы показываете текстовое поле 

$("#textbox_container").show();

Вы можете обновить значение текстового поля с помощью .val("")

Надеюсь, это поможет.

...