Можно ли создать текстовое поле везде, где щелкают мышью?

ProgramBox

Можно ли создать текстовое поле везде, где щелкают мышью?

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#jquery #html #css #jsf

#jquery #HTML #css #jsf

Вопрос:

Допустим, у меня есть замкнутая область (например, div region), и внутри этой области я хочу во время выполнения сгенерировать текстовое поле в точном месте щелчка мыши, и каждое вновь созданное текстовое поле будет привязываться к значению в моем управляемом компоненте. Возможно ли это сделать?

Ответ №1:

Да, это возможно, я не буду писать точный код, но это должно помочь вам начать:

Давайте разделим проблему на три части:

Фиксируйте событие щелчка и отправляйте данные на сервер
Обрабатывать данные
Отобразить компонент

Фиксируйте событие щелчка и отправляйте данные на сервер

Чтобы зафиксировать использование события $('mydivSelector').click(function(event)) , используйте свойство div offset() и event свойство pageX, pageY для вычисления относительного положения события click.

Чтобы отправить его на сервер, создайте скрытую форму с двумя скрытыми входными данными. В обработчике событий javascript ( .click(function(event)) ) установите значение этих входных данных в координаты x, y события и отправьте форму. Самый простой способ задать значения — присвоить им уникальный класс и использовать $('.uniqueClass') селектор. Использование идентификаторов входных данных jsf — более сложный способ, потому что вам нужно будет получить ClientID компонентов (смотрите, как это сделать в JSF 1.2 и в JSF 2).

Обрабатывать данные

В вашем JSF ActionListener у вас будут координаты события щелчка javascript относительно div. Создайте объект, содержащий эти данные и значение поля ввода (которое вы хотите создать). Внесите их в список.

Отобразить компонент

Вам нужно будет установить css для div на position:relative; , а css для входных данных на position:absolute; , чтобы входные данные были расположены относительно div.

Выполните итерацию по этому списку с помощью ui:repeat , создайте поля ввода JSF для каждого из них и установите для style атрибута значение top:#{myObject.y}; left:#{myObject.x}; .

Обновить:

Пример пользовательского интерфейса для формы, обратите внимание, что в зависимости от библиотеки компонентов, используемой вами реализации 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 задайте значение входных данных, нажмите на кнопку.

1. Спасибо. Я попытаюсь написать какой-нибудь код. Я спрошу, есть ли у меня еще вопросы.

2. Привет, я пару раз перечитал ваш пост, написал несколько примеров кодов для понимания offset , click события, position:absolute вложенные в position:relative , но я все еще ломаю голову, как отправить данные на сторону сервера. Отправлять ли мне его в сервлет, управляемый компонент? не могли бы вы написать какой-нибудь код, чтобы проиллюстрировать это немного подробнее, пожалуйста. Большое вам спасибо.

3. Я обновил ответ примером (используя управляемый компонент).

4. Благодаря вашему предложению. Я смог добиться того, чего я хочу. Теперь я могу создавать текстовое поле везде, где я нажимаю. Я хочу спросить одну вещь: как мне сфокусировать внимание на вновь созданном текстовом поле. Итак, я отправляю новую координату на сервер, из этой координаты создаю новый объект textbox и добавляю его в список, одновременно перезагружая компонент, отображающий список ui:repeat . Как мне сфокусировать внимание на вновь созданном текстовом поле?

5. Если я правильно помню, p:commandLink имеет атрибут oncomplete, который выполнит js после завершения вызова ajax. Найдите вновь созданный ввод с помощью jQuery (он должен быть последним в ui:repeat контейнере) и используйте jQuery focus() .

Ответ №2:

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

1. Это приведет к созданию текстового поля внутри div области, но как мне сгенерировать это текстовое поле в месте щелчка мыши?

2. Обновленный ответ для учета позиционирования.

3. Спасибо. Я попытаюсь написать какой-нибудь код. Я спрошу, есть ли у меня еще вопросы.

Ответ №3:

Вы имеете в виду что-то вроде этого?

 $('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 amp;rarr;"></p>
</form>
</div>