如何在点击事件时创建可编辑的输入 - how to create an editable input on click event

how to create an editable input on click event

本文关键字：创建编辑输入事件 | 更新日期: 2023-09-27

所以我有一个页面，我想用它来允许用户查看数据库中当前的内容，并通过单击该框对其进行编辑。我有一个非常笨拙的方法，适用于文本输入，但对于下拉框或日期选择器则完全崩溃。我的网页

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

inlineedit 类用作标记，因此 jquery 可以轻松找到它来发布，而 toedit 类当前只是隐藏属性。

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

既然你使用的是jQuery，所以使用jQuery事件。最好使用 prop() 方法将 readonly 设置为 false：

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

JSFiddle

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

$("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();
});

演示（再次更新）

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

看看演示 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");
});