Как отразить преобразование в поле input?

@bluser · Регистрация: 23.04.2017

Студворк — интернет-сервис помощи студентам

Есть поле ввода фамилии
JS преобразует строчные буквы в заглавные при выходе из поля input, это видно по alert
но хотелось бы видеть наглядно саму замену строчных букв на заглавные в самом поле input при выходе из него
т.е. что-бы вместо фамилии иванов в поле отобразилось ИВАНОВ.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form> 
<p> Фамилия <input onblur="BUKVA(this)" type="text" name ="FAMILY"> </p> 
<script>
function BUKVA(abv){
var FAM = $('input[name=FAMILY]').val();
FAM = FAM.toUpperCase();
alert (FAM);
}
</script>
</form >
</body>

@Пифагор · 02.06.2017, 23:16

PHP/HTML
1
2
3
4
5
6
<p>Фамилия <input type="text" name="FAMILY"></p>
<script>
document.querySelectorAll('INPUT')[0].addEventListener('blur', function(){
  this.value = this.value.toUpperCase();
})
</script>

Добавлено через 1 минуту
https://jsfiddle.net/vp6cfp0q/

@ntlinuxnt · 03.06.2017, 14:07

Осмелился поправить код Пифагора, думаю челоаек хочет что-то такое.
https://jsfiddle.net/vp6cfp0q/1/

JavaScript
1
2
3
document.querySelectorAll('INPUT')[0].addEventListener('input', function(){
  this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);
})

HTML5
1
<p>Фамилия <input type="text" name="FAMILY"></p>

@Пифагор · 03.06.2017, 17:33

ntlinuxnt, благодарю.

Я бы, вероятно, тоже так написал, если бы ни 2 нюанса:

Сообщение от bluser

вместо фамилии иванов в поле отобразилось ИВАНОВ.

и onblur="BUKVA(this)".

@ntlinuxnt · 03.06.2017, 22:00

Сообщение от Пифагор

если бы ни 2 нюанса

Что-то я провтыкал...

@bluser · 04.06.2017, 11:21 **[ТС]**

Спасибо Пифагору - просто реализовал его вариант в цикле для ввода ФИО
может кому пригодиться

HTML5
1
2
3
4
5
6
7
8
9
<p>фамилия<input class="fio" type="text" name ="fam"> </p> 
<p>имя<input class="fio" type="text" name ="im"> </p> 
<p>отчество<input class="fio" type="text" name ="otch"> </p> 
<script>
for (i = 0; i < 3; i++) {
document.querySelectorAll('.fio')[i].addEventListener('blur', function(){
this.value = this.value.toUpperCase();
})}
</script>

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Как отразить преобразование в поле input?

Решение