Удалить 3 пикселя в iOS / WebKit textarea - PullRequest
Новая
       20

Удалить 3 пикселя в iOS / WebKit textarea

24 голосов
/ 31 июля 2011

Я пытаюсь создать textarea, который выглядит точно так же, как div.

Однако на iOS есть 3 пикселя, которые я не могу удалить.

Вот мой код: 

<!doctype html>
<title>Textarea test</title>
<style>
textarea, div
{
  background: yellow;
  font: 13px arial;
  border: 0;
  padding: 0;
  border-radius: 0;
  margin: 0;

  -webkit-appearance: none;
}
</style>
<div>test</div>
<hr>
<textarea>test</textarea>

Это выглядит так (я увеличил):

3 extra pixels

Как видно на скриншоте, есть 3 пикселяперед текстом, от которого я хочу избавиться.Насколько я вижу, это не поле / отступ или граница.

Это происходит на моем iPhone и iPad, оба работают под управлением iOS 4.3.И чтобы быть ясно;эти 3 дополнительных пикселя не отображаются в Safari / Firefox / Chrome на моем рабочем столе.Или Windows Phone моего брата, если на то пошло.

РЕДАКТИРОВАТЬ 2011-08-10:
Я только что проверил это на <input type=text> и той же вещи "padding"появляется, за исключением того, что это 1 пиксель вместо 3.

Ответы [ 7 ]

12 голосов
/ 11 августа 2011

Хорошо ... Извините ... Вот и мы ... Официально неофициальный ответ ...

Вы не можете избавиться от этого.

Видимо, это «ошибка» с мобильным сафари на входах. См:

Однако, зная отступ, вы можете сделать это 

textarea {
  text-indent:-3px;
}

Это не симпатичное решение, но оно делает то, что вам нужно.

Редактировать Забыл упомянуть, протестирован с iOS Simulator. Вы можете попробовать на своем телефоне.

Еще один момент: это также предполагает, что вы обслуживаете CSS исключительно для мобильного сафари, особенно для iPhone. Более старый способ сделать это: 

/* Main CSS here */

/* iPhone CSS */
@media screen and (max-device-width: 480px){
  /* iPhone only CSS here */
  textarea {
    text-indent: -3px;
  }
}

Редактировать снова Мне было очень весело с этим ... Вы также можете использовать отдельные таблицы стилей с этими объявлениями: 

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Редактировать Потому что, очевидно, кто-то купил Android;) 

<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
  document.write('<link rel="stylesheet" href="iphone.css" type="text/css" />');
} else if (navigator.userAgent.indexOf('Android') != -1) {
  document.write('<link rel="stylesheet" href="android.css" type="text/css" />');
} else {
  document.write('<link rel="stylesheet" href="desktop.css" type="text/css" />');
}
</script>

Лично у меня действительно нет проблем с текстовыми записями, имеющими некоторые внутренние отступы. Это очищает его от края области и делает его более читаемым. Я, однако, считаю, что браузер должен поддерживать спецификации. Итак, вот обновление для разграничения между Android и iPhone. Веселись!

4 голосов
/ 18 марта 2014

Вот быстрое решение JavaScript (основанное на подходе stslavik), которое также сохраняет некоторые строки кода и тесты для iPad и iPod.

Если вы используете jQuery: 

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
  $('textarea').css('text-indent', '-3px');
}

Если вы хотите использовать стандарт JS: 

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
  textareas = document.getElementsByTagName('textarea');
  for(i = 0; i < textareas.length; i++){
    textareas[i].style['text-indent'] = '-3px';
  }
}
1 голос
/ 16 сентября 2015

Обходной путь - использовать div, который вы устанавливаете как редактируемый.

HTML 

<div class="editable" contenteditable="true">
    Editable text...
</div>

Javascript: 

<div onClick="this.contentEditable='true';">
    This is a test
</div>

JQuery 

 $(this).prop('contentEditable',true);
0 голосов
/ 24 октября 2018

Исходя из предыдущих ответов, кажется, что лучший способ справиться с этим - добавить margin-left: -3px к элементу textarea.Мы можем сделать это с помощью CSS, особенно iOS Safari , который не будет портить жизнь на Android 

textarea @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    margin-left: -3px;
}
textarea::placeholder @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    text-indent: -3px;
}
0 голосов
/ 05 мая 2017

text-intend не работает при наличии нескольких строк (как упоминал Джонатан в комментарии к принятому ответу).

Итак, это сработало для меня на iPhone 6: 

textarea {
    margin-left: -3px;
    &::placeholder {
        padding-left: 3px;
    }
}
0 голосов
/ 24 июля 2015

Итак, чистое решение CSS, основанное на уже упомянутых. Однако text-indent только делает для меня столько, сколько placeholder не влияет. Если вы добавите одну дополнительную строку, это поможет сбросить дополнительный отступ для устройств iOS. Вероятно, придется сделать что-то еще, чтобы использовать другие сенсорные устройства шириной более 480 пикселей. 

@media only screen and (max-device-width: 480px) {
   textarea {text-indent: -3px;}
   textarea::-webkit-input-placeholder { text-indent: 0px; }
}
0 голосов
/ 05 августа 2011

не могу проверить это прямо сейчас, но попробуйте 

float: left;

и / или 

border-width: 0;

и / или 

padding: -3px;

РЕДАКТИРОВАТЬ - еще одна попытка: 

-webkit-padding-start: 0px;
-webkit-margin-start: 0px;
text-indent: 0px;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
outline-offset: 0px;

Для справки, включая информацию о совместимости, см. https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

...