只要點擊鼠標，是否可以創建文本框？

假設我有一個封閉區域（如div區域），並且在該區域內，我希望在運行時在鼠標點擊的確切位置生成一個文本框，並且每個新創建的文本框都將綁定到我的託管值豆。有可能這樣做嗎？只要點擊鼠標，是否可以創建文本框？

2011-04-25 Thang Pham

是的，這是可能的，我不會寫確切的代碼，但是這應該讓你開始：

讓我們劃分問題分爲三個部分：

捕獲點擊事件，並將數據發送到服務器
處理數據
顯示組件

捕獲click事件，並將數據發送到服務器

捕獲事件使用$('mydivSelector').click(function(event))，使用div的offset()和event的pageX屬性，pageY屬性來計算點擊事件的相對位置。

要將其發送到服務器，請創建一個帶有兩個隱藏輸入的隱藏表單。在JavaScript事件處理程序（.click(function(event))）中，將這些輸入的值設置爲事件的x，y座標，並提交表單。要設置這些值最簡單的方法是給它們一個唯一的類並使用$('.uniqueClass')選擇器。使用jsf輸入的id是更難的方法，因爲您必須獲取組件的clientId（請參閱JSF 1.2和JSF 2中的如何執行此操作）。

處理數據

在JSF的ActionListener，你將有相對的JavaScript到div的單擊事件的座標。創建一個持有這些對象的對象和輸入字段的值（您要創建的）。把它們放在一個列表中。

顯示組件

您將需要div的CSS設置爲position:relative;，並輸入css來position:absolute;，這樣的投入會相對DIV定位。

使用ui:repeat對此列表進行迭代，爲每一個創建一個JSF輸入字段並將style屬性設置爲top:#{myObject.y}; left:#{myObject.x};。

更新：對於形式

UI例子，注意，根據組件庫，JSF實現使用可能會有更好的解決方案：

JSF：

<h:form styleClass="hidden"> 
    <h:inputText value="#{myBean.newInputXCoordinate}" styleClass="xCoordinate" /> 
    <h:inputText value="#{myBean.newInputYCoordinate}" styleClass="yCoordinate" /> 
    <h:commandButton actionListener="#{myBean.createNewInput}" value="Create new input" styleClass="createNewInput"/> 
</h:form>

CSS ：

.hidden{display:none;}

在JS中設置輸入的值，點擊按鈕。

來源

2011-04-25 21:17:04 Adam

謝謝。我會嘗試寫一些代碼。我會問，如果我有更多的問題。 – 2011-04-25 21:23:01

嗨，我重新讀你的帖子夫婦的時間，寫一些樣本代碼，以瞭解'offset'，'click'事件，'position：absolute'嵌套在'position：relative'中，但是我仍然不知道如何發送數據到服務器端。我將它發送給一個servlet，一個託管bean嗎？你可以寫一些代碼來說明它多一點請。非常感謝你。 – 2011-04-26 03:15:48

我已經用一個示例更新了答案（使用託管bean）。 – Adam 2011-04-26 09:55:21

$("targetDivId").click(function(event) { 
    $(event.target).append(
    $('<div></div>').css({ 
     position:'absolute', 
     left: event.pageX, 
     top: event.pageY 
    }).append('<input type="text" />')); 
});

來源

2011-04-25 19:43:46 lukiffer

這將在'div'區域內生成一個文本框，但是如何在鼠標單擊的位置生成該文本框？ – 2011-04-25 19:52:58

已解決定位問題的更新答案。 – lukiffer 2011-04-25 20:55:04

謝謝。我會嘗試寫一些代碼。我會問，如果我有更多的問題。 – 2011-04-25 21:22:47

您的意思是something like this？

$('a').click(function() { 
 
    $('form').show(); 
 
});

form { display: none; }

<div> 
 
<a href="#">Add Comment</a> 
 
<form action="" method="get" accept-charset="utf-8"> 
 
    <label for="la">label</label> 
 
    <textarea id="l1" name="Name" rows="8" cols="40"></textarea> 
 
    <p><input type="submit" value="Continue &rarr;"></p> 
 
</form> 
 
</div>

來源

2011-04-25 19:45:42 gutierrezalex

然而，謝謝你，我知道該怎麼做？我想知道是否可以在運行時在鼠標點擊的確切位置生成文本框。是否有可能 – 2011-04-25 19:49:30

只要點擊鼠標，是否可以創建文本框？

回答

相關問題