Делаем первую букву в строке заглавной на PHP/jQuery/CSS

Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.

Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.

Первая буква строки в верхнем регистре на PHP

На PHP существует функция под названием «ucfirst», которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.

Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:

<?php

	header("Content-Type: text/html; charset=utf-8");

	function mb_ucfirst($word, $charset = "utf-8") {

		return mb_strtoupper(mb_substr($word, 0, 1, $charset), $charset).mb_substr($word, 1, mb_strlen($word, $charset)-1, $charset);

	}

	$content = "скажи-ка, дядя, ведь не даром Москва, спаленная пожаром, Французу отдана?"; // Исходная строка

	echo mb_ucfirst($content); // Получаем результат с первой заглавной буквой

?> 

В таком варианте мы получим предложение, которое начинается с большой буквы, что, собственно говоря, нам и необходимо.

Первая буква строки в верхнем регистре на CSS

Этот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.

Использование следующее:

<div id="content">

	<p>первое предложение</p> 
	<p>второе предложение</p> 
	<p>третье предложение</p> 
	<p>четвертое предложение</p>

</div>

<style>

	#content p:first-letter {
		text-transform: uppercase;
	}

</style> 

С помощью псевдоэлемента «first-letter» и свойства «text-transform» мы задали оформление для каждой первой буквы параграфа.

Первая буква строки в верхнем регистре на jQuery

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

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

<input type="text" name="title" class="content">

<script>

	$(document).ready( function() {

		$(".content").on("keyup", function() {

			var text = $(this).val(); 
			var new_text = text.charAt(0).toUpperCase() + text.substr(1);

			$(this).val(new_text);

		});

	});

</script> 

Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.