Question

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

Answer 1

是的，有可能，我不会写出确切的代码，但这应该让你开始：

让我们将问题分为三个部分：

捕获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中，您将获得相对于div的javascript click事件的坐标。创建一个包含这些对象的对象和输入字段的值（您想要创建）。把它们放在一个清单中。

显示组件

您需要将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中设置输入值，单击按钮。

Answer 2

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

Answer 3

你的意思是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>

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

3 个答案: