1

Дали такое задание, есть несколько тегов <p>, нужно что бы у пользователя была возможность их менять. К примеру вот страничка с первым элементом и со вторым, нажал два раза по одному из них - появляется поле ввода(вместо текста), вводишь любое значение, нажимаешь Enter и все: вместо поля ввода написанный пользователем текст! Совсем не понимаю что мне делать и да, знаю что скорее всего у меня написан полный бред... Но помогите, пожалуйста!

HTML

<p onClick="changeTheName()" class="elementClass">First element</p>

JS

function changeTheName(){
    $('p').dblclick( function () { 
    var element = document.getElementsByClassName('elementClass'); 
    $('p').contents().unwrap(); 
    document.write('<input type="text" id="name">');

    $('#name').bind('keypress', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { 
          var name = document.getElementById('name').value;
          var inputValue = document.getElementById('name');
          inputValue.parentNode.removeChild(inputValue);
          var d = name;
          document.write('<p onclick="changeTheName()" class="elementClass">' + d + '</p>');
         } 
     }); 
  });

}
2
  • 1
    contenteditable?
    – user207618
    15 окт 2016 в 6:12
  • @Other спасибо, сейчас разберусь! :)
    – Mark_8
    15 окт 2016 в 6:19

1 ответ 1

1

Как вариант - вот такой пример:

HTML:

<div id="nameContainer">
    <span id="name">Введите имя</span>
    <input type="text" id="nameInput" hidden="hidden" />
</div>

JS:

$("#name").click(function () 
{
    $("#name").hide();
    $("#nameInput").val($("#name").text());
    $("#nameInput").show();
});
$("#nameInput").keypress(function(e)
{
    if (e.which == 13)
    {
        $("#name").text($("#nameInput").val());
        $("#nameInput").hide();
        $("#name").show();
    }
});
3
  • Подскажите, а как при большом количестве таких вот "кусков" HTML кода сделать так, что бы каждый раз новое id писать не пришлось. Пробовал через переменную и this.id, но переменная не передавалась через функции.
    – Mark_8
    15 окт 2016 в 19:07
  • @Mark_8 Честно говоря, не знаю сходу решение... Если будет время - посмотрю, как можно обойти эту проблему :)
    – spopovru
    17 окт 2016 в 6:08
  • Да, конечно. Спасибо!
    – Mark_8
    17 окт 2016 в 10:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.