Question

所以我有一个页面，我想用它来让用户看到数据库中当前的内容并通过单击该框来编辑它们。我有一个非常hacky方法适用于文本输入，但下拉框或日期选择器完全崩溃。我的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

由于您使用的是jQuery，因此请使用jQuery事件。最好使用readonly方法将prop()设置为false：

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

JSFiddle

Answer 2

你应该看看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 3

<强> 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>

要求更新通用绑定的更新

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

Answer 4

您可以将所有字段设置为只读和隐藏，直到关注：

$("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（再次更新）

如何在click事件上创建可编辑的输入

4 个答案: