Edytowanie danych onclick

Question

Nie jestem pewien, jak to się nazywa, ale chcę móc kliknąć, na przykład a div zawierający liczbę, a następnie zmieni się w pole tekstowe wejściowe, którego wartość będzie liczbą klikniętą.

Następnie chcę edytować numer i kliknąć (onblur wydarzenie), a zmieni się z powrotem na div, z pola tekstowego pokazującego nowy numer edytowany. Numer został również zaktualizowany do bazy danych poprzez ajax.

Jak nazywa się ta funkcja?
Jaki jest najlepszy sposób, aby to zakodować?

Answer 1

Nazywa się to edycją jQuery. Istnieje wiele wtyczek dostępnych z jQuery.

Answer 2

Nazwałeś już cały proces.

Najpierw przypisz wszystkie swoje liczby lub pola do jakiejś klasy.

<div class="editable">value</div> 

Następnie przypisz tej klasie jedno kliknięcie.

$('.editable').click(function(){ 
//replace element with input element containing the value 
//attach an onblur event to the new element 
$(newelement).blur(function(){ 
    //use $.ajax to send the element's value to your server 
    //remove the input element and then replace the previous element with the new value 
}); 
}); 

Answer 3

Jest jEditable: http://www.appelsiini.net/projects/jeditable

Jednak X-edycji wygląda o wiele ładniejsze: http://vitalets.github.io/x-editable/

Answer 4

Dlaczego nie po prostu zatrzymać się z jednego pola wejściowego i zmieniać style pól na plama. Możesz zabrać wszystko, aby nie wyglądało jak wejście, w ten sposób nie ma potrzeby zmiany w tę iz powrotem. Wykonaj rozmowę w Ajax w rozmycie.

Answer 5

można wykonać następujące czynności:

Czy zdarzenie click i utworzyć pole tekstowe w locie, który bierze tekst wewnątrz div jako wartość.

Mają plama nawet, które wiąże się z tym tekstowym i sprawia, że ​​wywołanie AJAX i jej sukcesu zmienić tekst div

Powiedzmy Twój HTML jest jak:

<div id="fullname">Amazing Spider man</div> 

I Twój kod JS będzie Bądź jak:

$('#fullname').click(function(){ 
    var name = $(this).text(); 
    $(this).html(''); 
    $('<input></input>') 
     .attr({ 
      'type': 'text', 
      'name': 'fname', 
      'id': 'txt_fullname', 
      'size': '30', 
      'value': name 
     }) 
     .appendTo('#fullname'); 
    $('#txt_fullname').focus(); 
}); 

$(document).on('blur','#txt_fullname', function(){ 
    var name = $(this).val(); 
    $.ajax({ 
     type: 'post', 
     url: 'change-name.xhr?name=' + name, 
     success: function(){ 
     $('#fullname').text(name); 
     } 
    }); 
}); 

to demostrated w tym jsfiddle

Answer 6

Rzeczy się zmieniły. HTML5 ma atrybut contentEditable z już całkiem dobrą obsługą przeglądarki, więc możesz chcieć to najpierw sprawdzić, szczególnie jeśli chcesz robić nie-jquery.

Po prostu wstawienie contentEditable = true do elementu div spowoduje kliknięcie i edycję (tekst podstawowy). Możesz ustawić podstawowego słuchacza i wprowadzić aktualizację do tablicy gotowej do zapisu przez ajax. More info here.

Również, here's a plugin, która zajmuje więcej i daje więcej elementów sterujących WYSIWYG dla tych pól.

Tak czy inaczej, oto przykładowy kod, żadnych wtyczek, bez jQuery:

var editable = document.getElementById('myContent'); 
 
editable.addEventListener('input', function() { 
 
    console.log('An edit input has been detected'); 
 
});

<div id="myContent" contentEditable=true>This is a paragraph. Click to make it editable.</div>