Вопрос:

Ориентация на конкретный текст, введенный в поле ввода формы и добавление в него стилей?

javascript jquery html css forms

56 просмотра

1 ответ

54 Репутация автора

Как я могу ввести второе слово, введенное в текстовое поле ввода формы? Не в самом поле, где они вводят текст, а как только человек, вводящий текст, нажимает кнопку «ввод» и данные выводятся.

Одно и то же расположение текста всегда вводится в это поле. Это 3 числа, затем пробел, затем имя.

Пример:
если я ввожу «903 Хьюстон» в поле ввода формы и запускаю его, как сделать так, чтобы стиль второго слова, введенного в «Хьюстон» (скажем, выделил жирным шрифтом), вывел «903 Хьюстон », предполагая, что мне нужно вставлять HTML-теги как-то, чтобы только второе слово вводилось? Как это можно сделать?

Автор: kma1289 Источник Размещён: 13.03.2017 05:09

Ответы (1)


1 плюс

126699 Репутация автора

Решение

Учитывая строку слов, я думаю, что самый простой способ стилизовать отдельные слова - .split()это ввести входную строку в массив отдельных слов, а затем обновить те, которые вы хотели, основываясь на их позиции в массиве, прежде чем .join()объединяться обратно в строка HTML. Таким образом, достаточно легко обернуть отдельное слово в элементе span с определенным классом, а затем стилизовать этот класс так, как вам нравится.

«Текст вводится администратором сайта и выводится в начало сайта на странице. Должен быть способ, которым это может быть предназначено и стилизовано».

Да. Выберите нужный элемент с помощью jQuery, а затем примените к нему вышеуказанную технику. Возможно, что-то вроде этого:

$(".styleMe").html(function(i, currentText) {
    var words = currentText.split(" ");
    words[1] = "<span class='bold'>" + words[1] + "</span>";
    words[3] = "<span class='highlight'>" + words[3] + "</span>";
    return words.join(" ");
});
.bold { font-weight: bold; }
.highlight { background-color: blue; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Some text.</p>
<p class="styleMe">These are some words to be styled.</p>
<p>Some other text.</p>

Примечание: если есть вероятность, что формат ввода может различаться по длине, то, очевидно, вы должны это проверить, чтобы, например, вы не пытались обновить второе слово в строке, содержащей только одно слово.

Автор: nnnnnn Размещён: 13.03.2017 05:30
Вопросы из категории :
32x32