0

所以我有一个页面，我想使用它来允许用户查看数据库中当前的内容并通过单击框来编辑它们。我有一个非常老套的方法，适用于文本输入，但对于下拉框或日期选择器完全崩溃。我的 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 类目前只是隐藏了属性。

显然这个解决方案不是很好，我想尝试找出一种更好的方法来创建双击功能等的输入。

4

4 回答 4

1

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

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

JSFiddle

于 2013-09-30T09:47:12.440 回答
1

你应该看看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>
于 2013-09-30T09:48:19.390 回答
1

看看DEMOJSFiddle

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");
});
于 2013-09-30T09:49:39.770 回答
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（再次更新）

于 2013-09-30T10:04:09.973 回答