使x可編輯字段顯示並觸發onfocus

我使用x-editable進行引導，以便使用客戶端數據編輯可編輯的表格字段。我遇到的問題是我有一個評論字段，有時長達幾百個字符，這使得表格看起來很可怕，因爲我們必須給我們空白：nowrap。使x可編輯字段顯示並觸發onfocus

爲了解決這個問題，我使用jQuery在頁面加載時僅顯示註釋的一部分，並在頁面加載時隱藏可編輯字段，但在我將鼠標懸停在其上時展開。我遇到的問題是，所有其他字段都可以通過x-editable進行選擇，我也希望可以選擇此字段。如果我將鼠標懸停在該字段上，我可以在沒有任何問題的情況下進入該選項卡，但我很感興趣，我可以如何選擇並觸發可編輯字段。

另一種解決方案是，我限制了php輸出的字符數或用jQuery隱藏它們，並且在我選擇Tab時擴展字段，但我不知道該怎麼做。我試圖調查：焦點和document.activeElement（），但沒有找到一種方法讓他們工作。

我將示例代碼添加到jsfiddle。我之前添加了一個輸入字段，因爲當您通過表格選項卡進行編輯時，可以將字段輸入到輸入元素中。如果可編輯字段處於活動狀態，而不是我可以進入，但是如果不是，字段會被跳過並且不會觸發。

這就是一個樣本保存編輯字段

<td id="comment" style="border:1px solid #000000;"> 
    <p id="short_comment">Short comment</p> 
    <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p> 
</td>

這是jQuery的樣本

$('#collapse').hide(); 
$('#comment').on('mouseenter', function(f) { 

    $('#short_comment').hide(); 
    $('#collapse').show(); 

    $("#collapse").on("show",function(event){ 
     $('#comment').width('200px'); 
    }); 

    $("#collapse").on("hide",function(event){ 
     $('#comment').width('50px'); 
    }); 
}); 

$('#comment').on('mouseleave', function(f) { 
    $('#short_comment').show(); 
    $('#collapse').hide(); 
});

來源

2013-03-12 Cognis

添加tabindexes你的HTML CONTROLL的tabflow：

<table> 
    <tr> 
    <td><input type="text" tabindex='1' /></td> 
    <td id="comment" tabindex='2'> 
     <p id="short_comment">Short comment</p> 
     <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p> 
    </td> 
    </tr> 
</table>

添加一些CSS：

#comment:hover #collapse, 
#comment:focus #collapse { 
    display:block; 
} 
#comment #collapse, 
#comment:hover #short_comment, 
#comment:focus #short_comment { 
    display:none; 
}

刪除javascript

演示：JSFIDDLE

來源

2013-04-03 09:19:34 HaNdTriX

使x可編輯字段顯示並觸發onfocus

回答

相關問題