Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery Как добавить элемент рядом с элементом, получившим фокус? / 7 сообщений из 7, страница 1 из 1
29.06.2017, 14:35
    #39479702
waszkiewicz
waszkiewicz
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
голова что-то кругом идет.
есть таблица со множеством
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<input type='text' class='tbCli'>
мечтается при получении фокуса добавить справа кнопку подтверждения

однако не выходит каменный цветок

[SRC JS]
$('.tbCli').focus(function() {
            this.after("<button class='btn btn-sm btn-default>' id='btnTdOK'><span class='glyphicon glyphicon-ok'></span></button>");
        })



или и правильно делает, что не выходит? Как подкрутить?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.06.2017, 14:58
    #39479723
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
waszkiewiczчто не выходит? Как подкрутить?
Либо начинай тестить свой скрипт... Либо сделай тестовый пример и покажи его тут... На тестовом примере можно что-то показать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.06.2017, 16:47
    #39479840
waszkiewicz
waszkiewicz
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
пока вопрос в том, как запретить повторный вызов события
https://jsfiddle.net/pincet/va1ru1e9/4/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.06.2017, 17:00
    #39479850
waszkiewicz
waszkiewicz
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
waszkiewicz,
я так понимаю что попал в угол, и каждый раз когда я попытаюсь показать кнопку подтверждения правее input - снова будет событие.
Чего в целом хочется - пользователь выбирает input - появляется кнопка OK рядом с input. Потерял фокус или нажал - пропадает
Как грамотно реализовать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.06.2017, 17:38
    #39479887
Alexander A. Sak
Alexander A. Sak
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
Вариант.
- input и кнопку располагать в одном элементе (div обычно)
- на приход/уход фокуса устанавливать/убирать класс у родительского элемента input-а.
- CSS-ом определить видимость кнопки в зависимости от наличия класса.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.06.2017, 17:50
    #39479895
правильные посоны
правильные посоны
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
Alexander A. SakВариант.
- input и кнопку располагать в одном элементе (div обычно)
- на приход/уход фокуса устанавливать/убирать класс у родительского элемента input-а.
- CSS-ом определить видимость кнопки в зависимости от наличия класса. Александр, щиорт побьери, прав! Так правильней.

А еще правильней не играть в шарады "кликни и увидишь", а сразу показывать кнопку/ссылку. Уж если неймётся, то активировать это хозяйство после валидации (на клиенте) заполнения текстбокса.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2017, 08:41
    #39480107
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery Как добавить элемент рядом с элементом, получившим фокус?
waszkiewiczпока вопрос в том, как запретить повторный вызов события
https://jsfiddle.net/pincet/va1ru1e9/4/
Как вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('.tbCli').focus(function() {
		var o=document.createElement('button');
		o.innerHTML='Ok';
		o.addEventListener('click',test);
		this.parentNode.appendChild(o);
	});
	$('.tbCli').blur(test);
	function test(){
		var o=this.parentNode.querySelector('button');
		this.parentNode.removeChild(o);
	};
});
</script>
</head>
<body>
<table>
	<tr>
		<td><input type='text' class='tbCli'></td>
		<td><input type='text' class='tbCli'></td>
		<td><input type='text' class='tbCli'></td>
	</tr>
	<tr>
		<td><input type='text' class='tbCli'></td>
		<td><input type='text' class='tbCli'></td>
		<td><input type='text' class='tbCli'></td>
	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery Как добавить элемент рядом с элементом, получившим фокус? / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 467ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444564]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 145ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 229ms
total:  467ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]