jQuery手風琴w /輸入，你如何得到輸入不關閉手風琴，仍然能夠控制它？

這更像是我自己的一個概念驗證，可以讓我知道我可以做什麼，不能做什麼，我已經取得了部分成功。jQuery手風琴w /輸入，你如何得到輸入不關閉手風琴，仍然能夠控制它？

我創建了一個包含兩個跨，其中作爲名稱和描述，以及一個按鈕，分別是點擊的手風琴（即，它不會打開或關閉手風琴。）

採取這一概念，我決定嘗試通過將名稱和描述跨度轉換爲文本輸入/文本區域來實現名稱和描述的可編輯性，這些文本輸入/文本區域運行良好。然而

的問題是，當我把我在按鈕上使用相同的技術，並使用它的輸入和textarea的，點擊它不允許你將光標移動到不同的位置。似乎沒有辦法讓我解決這個問題。

我試過event.preventDefault（），這並不在所有的工作。我試過event.stopPropagation（），它給出了部分工作行爲。我試着返回false，這與stopPropagation的工作方式相同。

我想知道如果任何人都可以提供任何關於此問題的見解。

我下面包含了jQuery JavaScript的，但對於一個更簡潔的例子，我將提供這裏的jsfiddle鏈接（http://jsfiddle.net/Rakshasas/xFhN3/），它給你的，我做什麼，一個更明顯的例子。請注意，當您單擊手風琴將其展開時，跨度將被隱藏並顯示輸入。點擊輸入不會關閉手風琴，但它也不允許您定位光標。

此外，如果你試圖改變在輸入文本，關閉手風琴確實更新這是預期的結果的跨度。這就是爲什麼我說我的概念部分起作用。

謝謝。

$(function() { 
    $(".accordion").accordion({ 
     header: 'h3', 
     collapsible: true, 
     active: false, 
     change: function(event, ui) { 
      var id = ui.newHeader.find('input:last').val(); 
      $("#status").text(id); 

      ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text()); 
      ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text()); 

      ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val()); 
      ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val()); 

      ui.newHeader.find('div.headerContainer span').hide(); 
      ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show(); 

      ui.oldHeader.find('div.headerContainer span').show(); 
      ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide(); 
     } 
    }); 

    $('input.name, textarea.desc').click(function(event){ 
     event.stopPropagation(); 
    }); 

    $(".delButton").button({ 
     icons: {primary: 'ui-icon-trash'}, 
     text: false 
    }).click(function(event) { 
     //Display user friendly text 
     return false; 
    }); 
});

來源

2011-10-05 Rakshasas

似乎在Chrome中正常工作。這可能與瀏覽器有關。

enter image description here

「點擊輸入不關閉手風琴，但它也不允許你將光標定位到」

也蠻好的Chrome。

來源

2011-10-05 17:13:50 EKet

人，我可以證實。剛剛嘗試過鉻，它很好。我一直在使用Firefox 7.0.1，但我也只是在Internet Explorer 9中嘗試過它，它似乎也不能在那裏工作。 – Rakshasas

可能有一些tweeks你可以做，使其兼容，但jquery支持根據他們的網站目前幾個瀏覽器。所以這並不意外，但令人失望。 http://docs.jquery.com/Browser_compatibility – EKet

如果有人正面臨着這個問題，這是爲我工作的一個小動作。

問題：與輸入/文本域的元素嵌套的jQuery手風琴，無法在Firefox獲得焦點的正常點擊（如果它使用jquery手風琴沒有嵌套手風琴，一切工作正常）。上述用戶確認。

的sympton僅涉及正常的單擊（左單擊）。如果您嘗試可選點擊（右鍵單擊），元素（input/textarea）將獲得焦點。奇怪的。

SOLUTION：您的文檔準備功能

$(function() { 

    //some code ... 

    $("input, textarea").click(function(){ 
     $("input, textarea").blur(); 
     $(this).focus(); 
    }); 

    //more code ... 

});

證明（通過我）對IEXPLORER，火狐和Chrome的工作中就聲明這一點。

來源

2012-08-10 03:25:35 jquinter

謝謝，它的工作原理。但我不明白如何將其應用於'select'輸入？ –

jQuery手風琴w /輸入，你如何得到輸入不關閉手風琴，仍然能夠控制它？

回答

相關問題