如何在點擊事件上創建可編輯的輸入

因此，我有一個頁面，我想用它來允許用戶查看數據庫中當前的內容，並通過單擊該框來編輯它們。我有一個漂亮的黑客方法，適用於文本輸入，但下拉框或日期選擇器完全分崩離析。我的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類目前只是隱藏屬性。

顯然，這個解決方案不是很大，我想嘗試，並由於您使用jQuery制定出一個更好的方式來對雙擊功能等

來源

2013-09-30 a_programmer

（再次更新）隨着下拉列表中，你如何設想一個用戶會添加一個新的菜單項？ – ChrisW

我以爲它只是存在於文本的位置，所以它從看起來像文本到輸入 –

你可以讓所有領域爲只讀和隱藏，直到聚焦：

$("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-30 10:04:09 Moob

這實際上正是我想要做的，這是風格與我希望達到的目標最接近。 –

我更新了[demo]（http://jsfiddle.net/CyN2V/3/），在字段更新後設置了''的內容。 – Moob

謝謝，這正是我想要做的，我無法擺脫我那個醜陋而破碎的位子！ –

可能創建一個輸入，使用jQuery的事件。這是最好的設置readonly爲false與prop()方法：

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

JSFiddle

來源

2013-09-30 09:47:12 George

感謝有關prop的信息，它爲什麼支持而不是addClass它只是一個jQuery的東西？ –

[class]（http://api.jquery.com/category/manipulation/class-attribute/）和[prop]（http://api.jquery.com/prop/）（property）是兩個不同的的東西。 – George

啊，這是我的noobishness顯示，可能應該閱讀一本教科書或兩個 –

你應該看看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-30 09:48:19

看起來真的很有效，但我將不得不改變與我的代碼相關的其他功能的使用它的負載。下一次需要做這樣的事情時，我會記住它，從頭開始編寫它可能會節省我的時間。 –

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>

UPDATE應要求使它GENERIC約束力

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

來源

2013-09-30 09:49:39

比我的代碼更清潔。我仍然在調整寫入正確的方式jquery –

最重要的變化是使用道具代替attr只讀 –

這個解決方案的問題是，我根據數據庫中的內容生成id，所以有100+在運行時創建具有不同ID的日期屬性。我需要一種方法來運行通用的日期屬性，可以在任何點擊的日期上調用，如果你看到我的意思 –

如何在點擊事件上創建可編輯的輸入

回答

相關問題