1. #1
    Avatar von x BoooM x
    Registriert seit
    30.11.2011
    Beiträge
    1.261
    Thanked 588 Times in 260 Posts

    Standard HTML - Am Ende einer Zeile scrollen?

    Hey,

    Code:
    <input type="text" required="" maxlength="160" data-ng-focus="showTitleCounter=true" data-ng-model="form.f.title" name="fSuggestEditQuestion[title]" id="question_suggest_edit_title" class="Form-input Form-input__text ng-pristine ng-valid ng-valid-required">
    Kann man an diesem Code irgendwas ändern, dass sobald man am Ende der Zeile angelangt ist darunter weitergeschrieben wird?

  2. #2
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: HTML - Am Ende einer Zeile scrollen?

    Dafür brauchst du eine Textarea:
    HTML-Code:
    <textarea rows="4">Ein sehr langer Text, der nicht in einer Zeile dargestellt werden kann.</textarea>
    Über rows kannst du festlegen, wie viele Zeilen die Textarea haben soll - Oder alternativ mit CSS über die Höhe. Das Beispiel zum rumprobieren gibts hier: Edit fiddle - JSFiddle


  3. The Following User Says Thank You to DMW007 For This Useful Post:

    x BoooM x (21.09.2015)

  4. #3
    Avatar von x BoooM x
    Registriert seit
    30.11.2011
    Beiträge
    1.261
    Thanked 588 Times in 260 Posts

    Standard AW: HTML - Am Ende einer Zeile scrollen?

    Klappt leider nicht so, wie ich mir das vorstelle.

    Ich habe hier eine Zeile auf einer Webseite wo ich schreiben kann:


    Wenn ich mit Firebug den Code anzeigen lassen, habe ich diesen, ich kann da verschiedene Dinge kopieren.

    HTML:
    Code:
    <input type="text" required="" maxlength="160" data-ng-focus="showTitleCounter=true" data-ng-model="form.f.title" name="fSuggestEditQuestion[title]" id="question_suggest_edit_title" class="Form-input Form-input__text ng-dirty ng-invalid ng-invalid-required">
    CSS-Pfad:
    Code:
    html.js.canvas.canvastext.no-touch.cssanimations.csscolumns.csstransforms.csstransforms3d.csstransitions.generatedcontent.video.localstorage.svg.filereader.performance body.ng-scope div#wrapper div#page.ng-scope div#main div#content div.Block.Block__secondary div.Block-body div form#qse-form.Form.QuestionSuggestEditForm.ng-scope.ng-dirty.ng-invalid.ng-invalid-required div.Form-item input#question_suggest_edit_title.Form-input.Form-input__text.ng-dirty.ng-invalid.ng-invalid-required
    Kennst du die Erweiterung Stylish? Ich möchte da halt den veränderten Code von der Zeile einfügen, dass ich dann auf der Seite eine größere Zeile habe bzw. die selbe Größe wo aber gescrollt wird.

    Kann ich da irgendwas dran ändern, dass das geht?
    Geändert von x BoooM x (22.09.2015 um 12:10 Uhr)

  5. #4
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: HTML - Am Ende einer Zeile scrollen?

    Achso du willst etwas manipulieren. Mit reinem CSS kannst du die Zeile lediglich länger machen. Dafür brauchst du in dem Fall auch keinen 5 Seiten langen Selektor, es reicht die Id des Textfeldes:

    #question_suggest_edit_title {
    width: 500px;
    }

    Um sie breiter zu machen führt kein Weg an einer Textarea vorbei. Du könntest mit JavaScript den DOM manipulieren:

    jQuery(function() {
    var newInput = jQuery('<textarea />')
    .data('ng-focus', 'showTitleCounter=true')
    .data('ng-model', 'form.f.title')
    .attr('id', 'question_suggest_edit_title')
    .addClass('Form-input Form-input__text ng-dirty ng-invalid ng-invalid-required');

    var oldInput = jQuery('#question_suggest_edit_title');
    oldInput.replaceWith(newInput);
    });

    Beispiel: http://jsfiddle.net/hy3myfmo/

    Der Code erzeugt eine Textarea, setzt ihr die gleichen Attribute wie deinem Input-Textfeld und ersetzt es mit dem Textfeld. Mittels CSS kannst du die Breite und Höhe der Textarea bestimmen. Oder alternativ über das rows-Attribut die Anzahl der Zeilen festlegen. Damit das funktioniert, muss auf der Seite jQuery eingebunden sein. Ist ein bekanntes und verbreitetes Framework. Falls nicht, musst du schauen, wie du mit Stylish eine JavaScript-Datei einbinden kannst:
    HTML-Code:
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js">


Ähnliche Themen

  1. U-IMG scrollen bis ins Unendliche möglich
    Von Devon im Forum Support
    Antworten: 6
    Letzter Beitrag: 22.10.2013, 21:16
  2. [SQL] Jede zweite Zeile ausgeben !
    Von Saad im Forum Andere
    Antworten: 3
    Letzter Beitrag: 13.09.2013, 11:21
  3. Hyperlink einer HTML Datei?
    Von x BoooM x im Forum HTML
    Antworten: 2
    Letzter Beitrag: 08.11.2012, 17:49
  4. Antworten: 0
    Letzter Beitrag: 14.10.2012, 20:07
  5. VB.Net Captcha aus Quelltext Zeile auslesen
    Von rVs14 im Forum .Net
    Antworten: 9
    Letzter Beitrag: 06.04.2012, 21:31
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.