Как выровнять placeholder по центру в Android браузере?

Question

[Ленар Фаттахов]

Заметил особенность браузера на андроид, у него placeholder инпута всегда выровнен по левому краю. Можно ли это исправить?
Всякие "::-webkit-input-placeholder"ы тут не срабатывают(
<input type="text" placeholder="Наш placeholder">

Answer 1

[Денис Артемьев]

Конечно, на решение не претендую на все же:
Вместо placeholder бывает делаю так:

var tel = 'Ваш номер телефона*';

        $('#tel').val(tel);

        $('#tel').focus(function(){
            if($('#tel').val() == tel)
                $(this).val('');
        });

        $('#tel').blur(function(){
            if($(this).val() == ''){
                $(this).val(tel);
            }
        });

При загрузке, в наш input помещаем значение переменной tel.
Затем при нажатии на input очищаем его, если там текст переменной tel.
И если после отведения курсора от input мы имеем пустое поле, то туда помещаем tel.

Недостаток: в отличии от placeholder, при нажатии не видно что нужно вводить (Хотя думаю, если заменить focus на presskey, будет тот же эффект - надо тестить).

PS: Как-то смотрел Вэбвизор на сайте с placeholder. Человек не мог ввести свое имя, постоянно нажимал backspace, пытаясь его стереть :)

Answer 2

[Ilya Korablev]

<center>Ваш placeholder</center>

Не?

Comments

[Ленар Фаттахов]

Уточнил в вопросе

Answer 3

[IceJOKER]

А text-align: center; не работает?

Comments

[Ленар Фаттахов]

К сожалению на андроид браузере нет. На ios все нормально

[IceJOKER]

Ленар Фаттахов: ну тогда остается вариант с padding, иначе не знаю.

Answer 4

[Murat Atila]

Как вариант, использовать label и центрировать абсолютно внутри инпута

Comments

[Ленар Фаттахов]

Вы не могли бы привести пример кода? я не совсем вас понял(

[Murat Atila]

Ленар Фаттахов: Вот пример jsfiddle.net/wwv8sak7
Про тег label, можете почитать тут htmlbook.ru/html/label
Id и for должны быть одинаковы у label и input, чтобы при клике на текст, выделялась форма, ну и потом стилизуйте.

P.S. А вообще непонятно, почему у вас не работает placeholder

[Murat Atila]

Ленар Фаттахов: Вариант с label, достаточно сложно будет стилизовать, на вашем бы месте, я бы пожертвовал тем, что на андроиде, placeholder не в центре.
P.S. вот немного дописал, чтобы при фокусе исчезал, но и тут как видите проблема, как только у нас пропадает фокус с инпута, надпись снова появляется за текстом =/
jsfiddle.net/wwv8sak7/1

[Ленар Фаттахов]

Наверное придется использовать какой-нибудь плагин, но все равно спасибо