動態創建的文本框在JQuery UI中不可編輯。使用的拖放選項刪除項目時添加了文本框和項目。但是文本框不可編輯。 文本框在Firefox中不可編輯。 Chrome工作正常。 任何想法都會很有幫助。請分享不同的方法,以滿足要求。Jquery-ui拖放。刪除的列表包含無法編輯的動態創建的文本框
jsfiddle.net/dsriniudt/xxndahs2/
動態創建的文本框在JQuery UI中不可編輯。使用的拖放選項刪除項目時添加了文本框和項目。但是文本框不可編輯。 文本框在Firefox中不可編輯。 Chrome工作正常。 任何想法都會很有幫助。請分享不同的方法,以滿足要求。Jquery-ui拖放。刪除的列表包含無法編輯的動態創建的文本框
jsfiddle.net/dsriniudt/xxndahs2/
我認爲這是你在找什麼,並在未來它是最好的,包括一個適當的例子。請閱讀:
https://stackoverflow.com/help/mcve
對於您的問題,我們要允許它已被刪除後的標籤進行編輯。一旦完成,它應該被保存爲標籤。
工作實例:https://jsfiddle.net/Twisty/xxndahs2/6/
的JavaScript
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable, .connectedSortable1"
}).disableSelection();
$("#sortable2").droppable({
cancel: "#addCustomTitle",
disabled: false,
drop: function(e, ui) {
// Use class 'cutomLabel' to identify labels that can be edited
ui.draggable.addClass("customLabel");
}
});
$("#sortable2").on("click", ".customLabel", function(e) {
console.log("Click capture, opening Text Box.");
// Capture current text
var currentLabel = $(this).text();
// Replace current HTML with Input field
$(this).html($("<input>", {
class: "entryField",
type: "text",
value: currentLabel
}));
// Set focus inside input field
$(this).find("input").focus();
return false;
});
$("#sortable2").on("blur keypress click", ".entryField", function(e) {
console.log(e);
switch (true) {
case e.keyCode == $.ui.keyCode.ENTER:
case e.keyCode == $.ui.keyCode.TAB:
case e.originalEvent == "blur":
case e.type == "focusout":
console.log("Leaving field or Enter was struck, saving value.");
// Capture value of input field
var currentValue = $(this).val();
// Replace HTML with text
$(this).parent().html(currentValue);
break;
}
});
});
所以,你不妨換個如何 「拯救」 發生。你可以添加按鈕,但我懷疑你正在尋找點擊或導航類型模型。所以如果用戶點擊ENTER或TAB或者他們點擊輸入,它會保存當前值。
添加了一些UI觸摸:https://jsfiddle.net/Twisty/xxndahs2/8/ – Twisty
感謝您的意見..我只是在尋找可編輯的文本框。感謝您的大力幫助 –
解決了小提琴http://jsfiddle.net/dsriniudt/xxndahs2/12/ –
https://jsfiddle.net/dsriniudt/xxndahs2/ –
當我嘗試小提琴的文本框是可編輯的。請解釋 – user7491506
@srinivasanD我懷疑你的意思是允許用戶更改項目標籤。就像現在一樣,當您放置該項目時,文本框將被追加並且可編輯。看起來你想在用戶點擊標籤時允許這一點。它是否正確? – Twisty