jquery - 是否可以在单击鼠标的任何地方创建一个文本框？

Question

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

Answer 1

是的，有可能，我不会编写确切的代码，但这应该可以帮助您开始:

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

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

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

要捕获事件，请使用 $('mydivSelector').click(function(event)) ，使用div的offset() ，以及 event的pageX、pageY属性来计算点击事件的相对位置。

要将其发送到服务器，请创建一个包含两个隐藏输入的隐藏表单。在 javascript 事件处理程序 ( .click(function(event)) )中，将这些输入的值设置为事件的 x,y 坐标，然后提交表单。设置值的最简单方法是为它们提供唯一的类并使用 $('.uniqueClass') 选择器。使用 jsf 输入的 ids 是更困难的方法，因为您必须获取组件的 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 };左:#{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中设置输入值，点击按钮。