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

13.03.2014

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

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

Спасибо.

13.03.2014

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

18.03.2014

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

18.03.2014

**********

19.03.2014

Trilby, видимо) спасибо, то, что нужно)

08.11.2014

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

08.11.2014

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

08.11.2014

это форма!
я искал что то подобное, но не нашел ну или плохо искал..

09.11.2014

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

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

09.11.2014

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

09.11.2014

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

09.11.2014

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

09.11.2014

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

[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]

09.11.2014

Foggy, ********** такой еще вариант ...
Критика дельная, но задача стояла сделать быстро... кроме верстки я еще на движок это все дело ставил.

09.11.2014

Быстро != не качественно

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

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

09.11.2014

Согласен! Более того: ********** 😁

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

09.11.2014

ZloVeЩиЙ, ну, про идеальный код я ничего и не говорил) отличный я сказал)