允許用戶在文本區域內部進行選擇後，通過js

我有一個名爲「What」的div。如果用戶點擊它，它會從文本更改爲textarea輸入。允許用戶在文本區域內部進行選擇後，通過js

$('.What').click(function() { 
    $(this).empty().html('<textarea name="X">' + $(this).text() + '</textarea>'); 
    $(this).find('textarea').select(); 
});

你可以看到我也選擇了新創建的textarea。
如果用戶點擊進入textarea，什麼都不會發生。

問：我如何允許用戶點擊新創建的textarea字段來將光標放在他們想要的位置？我懷疑這與使用現場活動來防止冒泡有關。

來源

2011-03-23 Phillip Senn

問題是，您的點擊處理程序不會消失後，您用textarea替換div的內容。因此，每次點擊textarea都會觸發「What」-div並再次觸發您的事件處理程序，從而重新應用textarea。

您必須確保點擊textarea不會觸發您的處理程序。一個簡單的方法是jquery的one-function，它在你的事件處理器被調用一次後解除綁定。

你的另一個問題是在你清空你的div後獲取你的div的內容，所以你的textarea默認值將是一個空字符串。這可以通過首先獲取內容來解決。更正後的代碼現在看起來像這樣

$('.What').one('click',function() { 
    var content = $(this).text(); 
    $(this).empty().html('<textarea name="X">' + content + '</textarea>'); 
    $(this).find('textarea').focus(); 
});

在這裏看到一個例子：http://jsfiddle.net/xszUS/

來源

2011-03-23 21:02:23 Simon

+1不知道「one」。感謝分享:) – 2011-03-23 21:04:37

哦，哎呀。我簡化了代碼太多。 – 2011-03-23 21:56:32

我知道問題出在哪裏！我使用jQuery UI可拖動，並且我有$（'div，p'）。disableSelection（）;在我的代碼中！ – 2011-03-23 22:02:01

用途：

$('.What').click(function() { 
    $(this).empty().html('<textarea name="X">' + $(this).text() + '</textarea>'); 
    $(this).find('textarea').focus(); 
});

總之，使用.focus()不.select()

如果你想在用戶點擊反應/ tab鍵切換出那個叫blur

來源

2011-03-23 20:53:06

.focus（）比。選擇（）更好，但我仍然有不能夠對用戶的問題點擊textarea裏面。 – 2011-03-23 20:55:32

試試這個

的文字區域

$('.What').click(function() { 
    var text = $(this).text(); 
    $(this).empty().html('<textarea name="X">' + text + '</textarea>'); 
    $(this).find('textarea').select(); 
    $(this).unbind('click'); 
});

檢查它在這裏：http://jsfiddle.net/Hy5ZB/

來源

2011-03-23 20:58:12

允許用戶在文本區域內部進行選擇後，通過js

回答

相關問題