Как создать редактируемый вход в событие click

Question

Итак, у меня есть страница, которую я хочу использовать, чтобы пользователи могли видеть, что в настоящее время находится в базе данных, и редактировать их, нажав на поле. У меня есть довольно хакерский метод, который работает для текстовых вменений, но для раскрывающегося списка или селектора даты полностью разваливается. моего HTML

<td name='joineddate133'> 
    <input type='date' 
    id='joind133' 
    name='joinda133 
    value='2012-03-15' 
    class='toedit' 
    readonly='readonly' 
    onclick='enablejoindate(this.id)' 
    size='20' /> 
    < /td> 

Текущего Javascript класс

<script> 
function enablejoindate(joindatid){ 
    $(function(){ 
    $("input:text[id="+ joindatid +"]").removeAttr("class"); 
    $("input:text[id="+ joindatid +"]").removeAttr("readonly"); 
    $("input:text[id="+ joindatid +"]").addClass("inlineditjoind"); 
    }); 
    } 
    </script> 

inlinedit используется в качестве маркеров, так что JQuery может найти его легко размещать и класс toedit в настоящее время только скрывает атрибуты.

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

Answer 1

Вы можете иметь все поля, как неизменяемые и скрытые до сфокусированы:

$("table").on("focus", "input, select", function(){ 
    $(this) 
    .prop("readonly", false) 
    .removeClass("toedit"); 
}); 

$("table").on("blur", "input, select", function(){ 
    $(this) 
    .prop("readonly", true) 
    .addClass("toedit") 
    .siblings("span").text($(this).val()); 
}); 

$("table").on("click", "td", function(){ 
    $(this).children().focus(); 
}); 

DEMO (снова обновлен)

Answer 2

Поскольку вы используете JQuery, используйте событие JQuery. Лучше всего установить readonly ложь с помощью метода prop():

$('input[type=date]').on('click', function(){ 
    $(this) 
     .removeClass("toedit") 
     .prop("readonly", false) 
     .addClass("inlineditjoind");  
}); 

JSFiddle

Answer 3

Вы должны взглянуть на X-editable.

<a 
    href="#" 
    id="joinda133" 
    data-type="date" 
    data-viewformat="dd.mm.yyyy" 
    data-pk="1" 
    data-placement="right" 
    data-original-title="Date you've joined" 
>25.02.2013</a> 

Answer 4

Have a look to the DEMO JSFiddle

JS/JQuery -

$("#joind133").on('click',function(){ 
    $(this).removeProp("readonly") 
     .removeClass("toedit") 
     .addClass("inlineditjoind"); 
}); 

HTML -

<td name='joineddate133'> 
    <input type='date' id='joind133' name='joinda133' value='2012-03-15' class='toedit' readonly='readonly' size='20'/> 
</td> 

ОБНОВЛЕНИЕ ПО ЗАКАЗУ ДЛЯ ПРИНЯТИЯ ЕГО GENERIC ОБЯЗАТЕЛЬНОЕ

$("input[type='date']").on('click',function(){ 
    $(this).removeProp("readonly") 
     .removeClass("toedit") 
     .addClass("inlineditjoind"); 
});