是否可以在单击鼠标的任何位置创建文本框？答案

【问题标题】：Is it possible to create a textbox wherever the mouse is clicked?是否可以在单击鼠标的任何位置创建文本框？
【发布时间】：2011-08-12 13:11:29
【问题描述】：

假设我有一个封闭区域（如div 区域），在该区域内，我希望在运行时在鼠标单击的确切位置生成一个文本框，并且每个新创建的文本框都将绑定到一个值在我的托管 bean 中。有可能吗？

【问题讨论】：

标签： jquery html css jsf

【解决方案1】：

你是说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>

【讨论】：

谢谢，不过，我知道该怎么做吗？我想知道我是否可以在运行时在鼠标单击的确切位置生成一个文本框。有没有可能

【解决方案2】：

是的，有可能，我不会写出确切的代码，但这应该可以帮助您入门：

让我们把问题分成三个部分：

捕获点击事件，并将数据发送到服务器
处理数据
显示组件

捕获点击事件，并将数据发送到服务器

要捕获事件使用$('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 中设置输入的值，点击按钮。

【讨论】：

谢谢。我会尝试写一些代码。如果我有更多问题，我会问。
嗨，我重读了你的帖子几次，写了一些示例代码来理解offset，click事件，position:absolute嵌套在position:relative中，但我仍然不知道如何向服务器端发送数据。我是否将其发送到 servlet、托管 bean？你能写一些代码来说明一下吗？非常感谢。
我已经用一个例子更新了答案（使用托管 bean）。
感谢您的建议。我能够实现我想要的。我现在可以在任何我点击的地方创建一个文本框。我想问的一件事是如何将焦点放在新创建的文本框上。所以我将新坐标发送到服务器，从该坐标创建一个新的文本框对象并将其添加到列表中，同时重新加载显示列表ui:repeat 的组件。如何将焦点放在新创建的文本框上？
如果我没记错的话，p:commandLink 有一个 oncomplete 属性，它会在 ajax 调用完成时执行 js。用jQuery找到新创建的输入（应该是ui:repeat的容器中的最后一个），并使用jQuery的focus()。

【解决方案3】：

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

【讨论】：

这将在div 区域内生成一个文本框，但是如何在鼠标单击的位置生成该文本框？
更新了关于定位的答案。
谢谢。我会尝试写一些代码。如果我有更多问题，我会问。