Коды всех смайликов «ВКонтакте» с обозначениями
Артем Мáлков
367 просм
0 комм
Поделиться

Делаем первую букву в строке заглавной на 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.

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария