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

Question

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

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

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

Я пытаюсь автоматически конвертировать эти

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

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

Answer 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" />

Примечание: но это будет работать, когда пользователь будет печатать только маленькими буквами. Но вам будет полезно пойти дальше. Чтобы сделать это для всех, я думаю, что вы должны использовать сценарии.

Рабочая скрипка

Answer 2

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

Например:

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

p {
  text-transform: capitalize;
}

выводит как:

Никлеш Раут

Никлеш Раут

Никлеш РАУТ

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

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

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

редактировать

Спецификация на самом деле говорит следующее:

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

Советы: пожалуйста, проверьте сброс таблицы стилей CSS для любого переопределения для преобразования текста

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

Свойство text-transform контролирует использование заглавных букв текста.

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

Наследуется: да

Версия: CSS1

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

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

Синтаксис CSS

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

Стоимость недвижимости

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

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

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

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

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

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

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

https://jsfiddle.net/tfn2k46n/