Entfernen von 3 Pixel in iOS/WebKit textarea

Ich versuche zu schaffen, eine textarea, die genauso aussieht wie eine div.

Aber auf iOS gibt es 3 Pixel kommen von irgendwo, die ich nicht entfernen können.

Hier ist mein code:

<!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>

Gerendert wird wie so (ich hab gezoomt):

Entfernen von 3 Pixel in iOS/WebKit textarea

Wie der screenshot zeigt, gibt es 3 Pixel vor den text, den ich loswerden will. Soweit ich sehen kann es ist nicht die margin/padding oder border.

In diesem Fall auf meinem iPhone und iPad, beide mit iOS 4.3. Und klar zu sein; die 3 zusätzlichen Pixel nicht zeigen, bis auf Safari/Firefox/Chrome auf meinem desktop. Oder mein Bruder Windows Phone, für diese Angelegenheit.

BEARBEITEN 2011-08-10:

Ich habe gerade getestet, auf einem <input type=text> und die gleichen "Polsterung" etwas erscheint, außer, dass es 1 pixel statt 3.

  • Haben Sie versucht, padding-left=0, padding-..=0, etc? Ist das ein iOS/WebKit-problem oder nicht, passiert das auch mit anderen Plattformen?
  • Ja, der Abstand ist 0 (siehe code). Ich habe keine anderen mobilen Geräten zu testen, aber auf meinem desktop, es gibt keine extra Abstand auf Safari, Firefox oder Chrome.
InformationsquelleAutor Tom Lokhorst | 2011-07-31
  1. 12

    Okay... Sorry... Here we go... Die offiziell inoffizielle Antwort ist...

    Können Sie nicht loswerden.

    Anscheinend ist dies ein "bug" mit mobile safari auf Eingaben. Siehe:

    Können Sie jedoch die Kenntnis der Gedankenstrich dies

    textarea {
  text-indent:-3px;
}

    Es ist nicht eine hübsche Lösung, aber es tut, was Sie brauchen.

    Bearbeiten
    Vergaß zu erwähnen, getestet mit dem iOS-Simulator. Sie könnten versuchen, auf Ihrem Telefon selbst.

    Einem anderen Punkt: Das setzt auch Voraus, dass man mit css allein für den mobile safari, speziell für das iPhone. Eine ältere Weg dies zu tun ist:

    /* Main CSS here */

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

    Bearbeiten Wieder
    Ich bin viel zu viel Spaß mit diesem... Sie können auch separate stylesheets mit diesen Erklärungen:

    <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">

    Bearbeiten, Weil offenbar jemand kaufte ein Android 😉

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

    Persönlich, ich don ' T haben wirklich ein problem mit text-Einträgen einige interne Einzug. Es löscht es aus dem Bereich der Kante und macht es besser lesbar. Ich bin allerdings der Meinung, dass ein browser soll die Unterstützung der spec. Also hier ist ein update für die Unterscheidung zwischen android und iPhone. Spaß haben!

    • Ich fürchte, ich werde gehen mit der text-indent: -3px; option. Und dienen, dass nur iOS.
    • Es ist nicht eine schreckliche option: Ähnlich serving up-styles für IE7/8/9. Es ist einfach nicht schön. Bis mobile-safari beginnt rendering mehr genau, jedenfalls.
    • Das ist toll, es sei denn, Sie wollen, dass es funktioniert auf Android als auch.
    • Die Leute mit Android haben andere Probleme (Sie wissen, dass Sie Geld verschwendet auf einem Android). Sie wollen, um es zu beheben, können Sie immer mit der selektiven JS. Ich poste ein Beispiel oben.
    • Ich denke, ich würde tatsächlich diesen Inhalt mit <style> tags mit der Plattform-spezifische css gerendert wird dort eher als Last einem externen stylesheet mit mehr header-Informationen als der Inhalt. An einem bestimmten Punkt wird es mehr über das, was Sie mit Leben können – wenn Sie unbedingt sein muss, dass -3px auf die textarea, dann tun Sie es, aber wenn es nicht entscheidend, warum sollten Sie den zusätzlichen Aufwand für ein nicht-Problem?
    • text-indent gilt nur für die erste Zeile des Textes. Dies funktioniert gut in einem <input>, aber in einem <textarea> mit mehreren Zeilen text nur die erste Zeile wird nach Links verschoben. In dieser situation sollten Sie so etwas wie margin-left: -3px.
    • Scheint behoben zu sein, die von iOS-13.

    InformationsquelleAutor stslavik
  2. 4

    Hier eine einfache JavaScript-Lösung (basierend auf stslavik Ansatz), das spart einige Zeilen code und tests für-iPad und iPod als auch.

    Wenn Sie jQuery verwenden:

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

    Wenn Sie möchten, verwenden Sie ein standard-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';
  }
}
    • Dies ist die Lösung, die ich verwenden und es funktioniert Super. Ich bin mit margin-left: -3px statt text-indent, aber gleiche Idee, danke.
    InformationsquelleAutor saschoar
  3. 1

    Man kann dies umgehen, verwenden Sie ein div, das Sie als bearbeitbar.

    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);
    InformationsquelleAutor Brian Wilkinson
  4. 0

    text-intend funktioniert nicht, wenn mehrere Linien (wie Jonathan bereits erwähnt in einem Kommentar auf die akzeptierte Antwort).

    So, das funktionierte für mich auf dem iPhone 6:

    textarea {
    margin-left: -3px;
    &::placeholder {
        padding-left: 3px;
    }
}
    InformationsquelleAutor Betty St
  5. 0

    Basierend auf den bisherigen Antworten, es scheint, wie der beste Weg zur Bewältigung dieses wird durch das hinzufügen einer margin-left: -3px auf das textarea-element. Dies können wir mit einigen CSS-Bekämpfung besonders iOS-Safari, die nicht Durcheinander zu bringen, die auf 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;
}
    InformationsquelleAutor Faizan Virani
  6. -1

    Also eine Reine css-Lösung baut auf den bereits genannten. Aber die text-indent nur so viel tut für mich, wie der placeholder ist nicht erfolgt. Wenn Sie hinzufügen, in einer extra Zeile, es hilft ein reset der extra Einzug für iOS-Geräte. Wird wahrscheinlich haben, um einige der anderen wizardy zu ermöglichen, für andere touch-Geräte von breiten über 480px obwohl.

    @media only screen and (max-device-width: 480px) {
   textarea {text-indent: -3px;}
   textarea::-webkit-input-placeholder { text-indent: 0px; }
}
    InformationsquelleAutor Isaac Minogue
  7. -2

    kann nicht testen Sie es jetzt, aber versuchen

    float: left;

    und/oder

    border-width: 0;

    und/oder

    padding: -3px;

    BEARBEITEN - anderes versuchen:

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

    Referenz-einschließlich Informationen zur Kompatibilität finden Sie unter https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

    • Sorry für die späte Antwort. Aber leider, keiner von denen funktioniert.
    • bitte siehe mein edit oben.
    • Das ist ein guter Versuch, aber keine Würfel. Die 3 Pixel bleiben.
    • sorry, dass es nicht hilft - dann vermute ich kurz von der Erstellung Ihrer eigenen WebKit-browser für iOS gibt es keine Lösung, denn es scheint eine interne Sache in der iOS-WebKit -...
    InformationsquelleAutor Yahia
Schreibe einen Kommentar