Jquery: переключение между вводом и текстом по щелчку

#jquery #html #input

#jquery #HTML #ввод

Вопрос:

Мне нужно переключаться между вводом и текстом по щелчку. Что-то вроде живого редактирования.

Я написал этот код, но он не работает.

HTML:

 <span class="editInput">Change the value on click</span>
<button>Click me</button>

JS:

 var editmode = false;

$('button').on('click',function(){
    if(editmode){    
        $('.editInput').replaceWith(function(){
           return '<span class=' this.className '>' this.value '</span>';
           editmode = false;
        })
    }else {
        $('.editInput').replaceWith(function(){
           return '<input type="text" value=' this.text ' class=' this.className '/>';
           editmode = true;
        })    
    }

})

Кто-нибудь может мне помочь?

1. Вместо того, чтобы заменять их, почему бы вам не поместить оба в DOM и просто скрыть один или другой.

2. Если ваше приложение может быть HTML5, вы можете использовать атрибут contenteditable : html5doctor.com/the-contenteditable-attribute

Ответ №1:

Посмотрите на эту скрипку. Это не очень элегантно, но я думаю, что это быстрое и более чистое решение, чем то, что вы делали. Дайте мне знать, если у вас возникнут еще какие-либо вопросы.

 <div>
    <input/>
    <span>test</span>
</div>
<button>Update</button>

span {
    display:none;
}

$('button').on('click',function(){
    if($("input").is(":visible")) {  
        $("input").hide();
        $("span").text(
            $("input").val()
        ).show();
        $("button").text("Edit");
    } else {
        $("span").hide();
        $("input").text(
            $("span").val()
        ).show();
        $("button").text("Update");
    }
});

1. Спасибо @joshboley! Это работает! И только одно, сначала нужно показать диапазон, а затем показать ввод по щелчку. Я просто скрыл ввод в css и записал то же значение во ввод.

2. Да, это должно работать просто отлично. Рад, что смог помочь!

Ответ №2:

Во-первых, this.text должно быть this.innerText или $(this).text() .

Во-вторых, вам нужны кавычки вокруг value атрибута в <input> теге, иначе он не будет работать с несколькими словами в значении. Было бы еще лучше использовать объектную форму конструктора элементов jQuery, чтобы кавычки в значении также не вызывали проблем.

В-третьих, назначение editmode должно быть вне replaceWith функции. Это после return инструкции, поэтому оно никогда не выполняется.

Конечный результат:

var editmode = false;

 $('button').on('click', function () {
    if (editmode) {
        $('.editInput').replaceWith(function () {
            return $("<span>", {
                "class": this.className,
                text: this.value
            });
        });
        editmode = false;
    } else {
        $('.editInput').replaceWith(function () {
            return $("<input>", {
                value: this.innerText,
                    "class": this.className
            });
        });
        editmode = true;
    }

});

СКРИПКА