ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Выделение слов в input

 

1555
Алексей @TheDark
Ghbdtn. Это сложно сформулировать, вся задача на скрине из вк:

Нужно что-то подобное, чтобы в слово, введенное в текстовое поле после нажатия пробела и/или Enter (а еще лучше, чтоб после того, как поставить запятую) выделялось другим цветом (фоном). Я даже не знаю как это назвать, поэтому гугл не помог.
Кто знает, как это вообще делают? Может пример какой покажите, дальше разберусь (:

Спасибо.

Отредактировано TheDark - 13.03.2014
6703
Андрей @ZloVeЩиЙ
TheDark,
чтобы в слово, введенное в текстовое поле после нажатия пробела и/или Enter (а еще лучше, чтоб после того, как поставить запятую) выделялось другим цветом (фоном).

это немного не так реализовывается, есть **********, но ты можешь и свой написать))

1555
Алексей @TheDark
Помогите, пожалуйста, найти решение для транслита в реальном времени. Нужен скрипт, который бы одновременно с вводом предложения в текстовое поле (input) рядом транслитерировал его. Весь гугл облазил и ничего не нашел. С меня благодарочка (:

8497
Степан @Trilby
TheDark пишет:

Помогите, пожалуйста, найти решение для транслита в реальном времени. Нужен скрипт, который бы одновременно с вводом предложения в текстовое поле (input) рядом транслитерировал его. Весь гугл облазил и ничего не нашел. С меня благодарочка (:

**********

1555
Алексей @TheDark
Trilby, видимо) спасибо, то, что нужно)

6703
Андрей @ZloVeЩиЙ
Все не могу дописать функцию, нужно что бы при клике на ссылку её текст вставлялся в поле (это получилось реализовать), а при повторном клике удалялся (это не могу реализовать), что то типу toggle класа что - ли ...
$("a").click(function (e) {
e.preventDefault();
var elem = $("input");
var text = $(this).text();
elem.val( elem.val() + " " + text );
});

20089
Dimitry @Dimitry
Сложность в том что ты не вставляешь, а добавляешь текст, поэтому удалять его сложно, зависит от того что это такое вообще)

6703
Андрей @ZloVeЩиЙ
это форма!
я искал что то подобное, но не нашел ну или плохо искал..

2970
удалён @Foggy
Дима имеет ввиду не какой это элемент интерфейса (это и так понятно, раз инпут), а какой функционал выполняет инпут.

Если этот текст вставляется в конец инпута всегда и больше нигде не может быть и дописать после него текст нельзя (например поле блокируется), то при удалении можно с конца считать символы. Можно в начало инпута вставлять или после какого-то определённого числа символов. Тогда тоже можно удалить. Если текст всегда в рандомном месте, то можно регуляркой проверять весь инпут на наличие этого текста и удалять, но это не всегда годится, в зависимости от функционала инпута. Например, если текст вставляться может много раз, то удалит либо все совпадения, либо какое-то определённое (смотря как регулярку напишешь). Какой подход тебе нужен?

Отредактировано Foggy - 09.11.2014
6703
Андрей @ZloVeЩиЙ
Foggy, думал все понятно, оказалось куча нюансов!
Это обычная форма обратной связи или форма захвата (кто с лендингами работал -- поймет),
отправляет на указанное мыло имя, телефон + необходимые услуги (боль).
Услуги я прописываю сам, при клике на ссылку, текст ссылки (название услуги) вставляется в поле, таких ссылок несколько (= количеству услуг).
Вот то что уже есть -- **********
Как при повторном клике, убирать текст ссылки (название услуги) из поля?

20089
Dimitry @Dimitry
Добавлять/удалять часть строки муторно и не надёжно, если планируется эту часть удалять.
Лучше присваивать полную строку, либо разбить на 2 поля.

6703
Андрей @ZloVeЩиЙ
ZloVeЩиЙ, для одного значения в поле было проще, делал так список выпадающих стран.городов, тут глянуть можно: **********

2970
удалён @Foggy
Ну ты и заморочился... Зачем свой велосипед опять? Готовые решения: **********, **********. В них, в отличие от твоего решения, есть мгновенная фильтрация всего списка городов, когда начинаешь писать город. А в таких селекторах это ад как необходимо.

[spoiler=Но если всё же нужен велосипед...]$("a").click(function (e) {
e.preventDefault();
var elem = $("input[name$='what']");
var val = elem.val();
var text = $(this).text();
if(val.match(text)) {
elem.val(val.replace(text+', ',''));
} else {
elem.val(val+' '+text+', ');
}
});
Так делать крайне не рекомендуется, потому что регулярка - это боль для браузера.
[/spoiler]

[spoiler=p.s. извини, не сумел воздержаться от комментариев]
1. внизу сайта во вкладках между городами, когда кликаешь по другому городу, его название немного дёргается, потому что удаляется border. сделай его border-color: transparent, т.е. прозрачным, а не убирай, тогда такого не будет.
2. по спецификации html5 в списке ul всегда должны быть только li. p туда ставить нельзя. для таких случаев делается невыбираемый li.country
3. <a href="#" onclick="javascript:document.getElementById('to').value='Москва'">Москва</a> семантично заменять на <button class="ps-to">Москва</button> а в js уже вешается обработчик клика. вот button.close ты вполне семантично сделал, а тут зачем ссылка? разница между кнопкой и ссылкой в том, что кнопка выполняет действие, а ссылка переадресовывает на другую страницу. ну, это по спецификации, конечно. работать-то оно много как будет.
4. <form action="javascript:void(0);" onsubmit="ajax()"> - такая же ситуация. пишется класс или id, а через js обработка. а чтоб документ проходил валидацию, в action можно написать что угодно. например, # или /
5. Атрибут map-img (не знаю, зачем он) для валидации можно заменить на data-map-img

В остальном - офигенный лендинг![/spoiler]

Отредактировано Foggy - 09.11.2014
6703
Андрей @ZloVeЩиЙ
Foggy, ********** такой еще вариант ...
Критика дельная, но задача стояла сделать быстро... кроме верстки я еще на движок это все дело ставил.

Отредактировано ZloVeЩиЙ - 09.11.2014
2970
удалён @Foggy
Быстро != не качественно

Если делаешь и быстро и качественно - ты бог 😁

Я бы не писал всего этого, но тут совсем чуть-чуть результат не дотягивает до отличного.

6703
Андрей @ZloVeЩиЙ
Быстро != не качественно

Согласен! Более того: ********** 😁
Я бы не писал всего этого, но тут совсем чуть-чуть результат не дотягивает до отличного.

Не перегибай... До идеального мне еще далековато.
По поводу кода, даже в этом проекте, его можно как минимум на 30% оптимизировать ...

Отредактировано ZloVeЩиЙ - 09.11.2014
2970
удалён @Foggy
ZloVeЩиЙ, ну, про идеальный код я ничего и не говорил) отличный я сказал)