Редактируемый текстовый функционал с использованием jQuery - PullRequest
Новая
       22

Редактируемый текстовый функционал с использованием jQuery

3 голосов
/ 23 октября 2010

У меня есть кнопка с изображением, и когда я нажимаю на нее, я хочу, чтобы определенное поле перешло из текста в редактируемое текстовое поле, вроде кнопки динамического редактирования.то есть. id = "text1"), и когда я нажимаю кнопку, текст изменяется на редактируемое поле, может быть, что-то вроде $("#text1").hide();, а затем $("#field1").show();, но между ними мне нужно дать полю значение текста, изатем, когда я нажимаю кнопку «Сохранить», я должен скрыть поле ввода и просто показать текст с новым значением.

Любая помощь будет принята с благодарностью.

Спасибо: D

Ответы [ 3 ]

5 голосов
/ 23 октября 2010

С учетом поля ввода, абзац с id="text1" и кнопкой. 

<input type="text" />
<p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<button>Copy</button>

Этот простой jQuery скопирует текст из абзаца, скроет его и покажет ввод с текстом из абзаца. 

$("button").click(function() {
   $("input").val(
       $("#text1").hide().text()
   ).show();
});

Вот пример .

Ради интереса, я написал небольшой скрипт, который включает функциональность <editable> для абзацев. Просто добавьте класс .editable к любому абзацу, а jQuery позаботится обо всем остальном. Я не расширил его, чтобы разрешить многократное редактирование, и я почти начал писать вызовы AJAX, которые сохраняются в базе данных, потому что мне скучно. Но , так как светит солнце, я подумал, что лучше пойти на пляж. Вот мой код и пример. 

$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);

    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());

        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});

ОБРАЗЕЦ

Вам действительно не нужны все идентификаторы, но если вы собираетесь выполнять POST с новыми значениями, вы можете легко обратиться к элементам.

0 голосов
/ 19 августа 2016 

$(document).ready(function(){

    $('#mod').click(function(){

    $('#text1').html('<input id="no" size="'+$(this).text().length+'" type="text" value="'+ $('#text1').text() + '">');
      
    $('#mod').hide();

    $('#sav').show();

    });

    $('#sav').click(function(){
						     
    // here code to save data in database

    });   
    });    
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <td id="text1"> text </td>
    <input type="button" id="mod" name="modify"  value="modify" />
    <input type="submit" name="submit" id="sav" value="save" />
    </table>
0 голосов
/ 23 октября 2010

Не так уж плохо. Текст переходит в область значений текстового поля. Так что возьмите его из текстовой области, сохраните его во временной переменной и поместите в текстовое поле.

На самом деле, вам даже не нужен темп, я не думаю, это должно выглядеть примерно так: 

$('#field1').val($('#text1').text)

Обратите внимание, что это не проверено. эта статья SO * может быть также полезна .

...