Как применить заголовок в поле ввода через css

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

Я также пробовал

text-transform: capitalize;
text-transform: lowercase;

Я пытаюсь выполнить автоматическое преобразование для этих

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

Или я должен идти с Javascript.

Ответы

Ответ 1

Вы можете сделать следующий путь, используя css. Это будет работать для всего слова.

input { 
  text-transform: capitalize;
}
::-webkit-input-placeholder { 
    text-transform: none;
}
:-moz-placeholder { 
    text-transform: none;
}
::-moz-placeholder { 
    text-transform: none;
}
:-ms-input-placeholder { 
    text-transform: none;
}

<input type="text" placeholder="test" />

Ответ 2

У меня была аналогичная проблема. text-transform: capitalise будет использовать только первую букву слова. Другие письма не будут затронуты.

Например:

<p>nIklesh raut</p>
<p>NIKLESH RAUT</p>
<p>niklesh RAUT</p>

p {
  text-transform: capitalize;
}

выводится как:

NIklesh Raut

NIKLESH RAUT

Niklesh RAUT

http://codepen.io/jaycrisp/pen/YwjyME

Я пробовал много вещей и не нашел способ сделать это только в CSS. Лучший вариант - заставить сервер возвращать строчную строку, тогда текстовое преобразование будет вести себя последовательно. Обратите внимание, что это также проблематично для имен. Например. Лео МакГарри будет отформатирован Лео Маккари.

Если у вас нет обратного доступа, вам нужно сначала преобразовать строку в нижний регистр в javascript.

изменить

Спектр фактически говорит следующее:

капитализировать

Устанавливает первый символ каждого слова в верхнем регистре; другие символы не затронуты.

https://www.w3.org/wiki/CSS/Properties/text-transform

Ответ 3

text-align: center;
font-family: 'Signika', sans-serif;
line-height: 60px;
font-size: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;

Используйте что-то вроде этого.

Ответ 4

Если вы идете с javascript, это решит вашу проблему

var str = "nIklesh raut";
str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

Ссылка: Как заглавные буквы первой буквы каждого слова, как город из двух слов?

Ответ 5

CSS будет влиять только на стиль текста в тексте, он не изменит базовое значение текстового поля. Это означает, что при доступе к значению с помощью JavaScript или при отправке его на ваш сервер значение будет таким, как оно было введено, а не конвертировано в верхний регистр. Вам нужно будет сделать это самостоятельно либо с помощью JS, либо со своим серверным языком.

Ответ 6

Советы. Пожалуйста, проверьте reset таблицу стилей CSS для любого переопределения для text-transform

свойство text-transform - определение и использование

Свойство text-transform управляет капитализацией текста.

Значение по умолчанию: none

Унаследовано: да

Версия: CSS1

Синтаксис JavaScript: object.style.textTransform = "uppercase"

Все браузеры полностью поддерживают это свойство.

Синтаксис CSS

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
// For DOM 
document.getElementById("myP").style.textTransform = "capitalize";

Значения свойств

нет - нет капитализации. Текст отображается как есть. Это значение по умолчанию

capitalize - преобразует первый символ каждого слова в верхний регистр

uppercase - преобразование всех символов в верхний регистр

нижний регистр - преобразование всех символов в нижний регистр

initial - присваивает этому свойству значение по умолчанию.

inherit - наследует это свойство от его родительского элемента.

Тестовый рабочий файл:

https://jsfiddle.net/tfn2k46n/