Wie kann man HTML -Textfeld maßgeblich, aber auch scrollbar machen?

Question

Ich habe ein HTML -Textfeld, das ich readonly gemacht habe. Die Sache ist jedoch, dass das Feld nur 100 Pixel breit ist. Und ich habe zum Beispiel einen Satz, der in diesen 100 Pixel nicht angezeigt wird. Da es maßgeblich nicht scrollbar ist.

Mit anderen Worten. Wie kann ich das Feld immer noch nicht bearbeitet haben? Aber auch machen, so dass längere Saiten, die nicht in das Feld passen, sichtbar sind?

Danke!

Answer 1

Es gibt einige JavaScript, die Sie verwenden können. Wenn Sie kein Framework verwenden, würde es jedoch ziemlich hässlich aussehen, weil es nicht trivial ist.

Das JavaScript keypress Ereignislöser löst, wenn eine Taste gedrückt wird, die Cursorschlüssel jedoch nicht auslöst (aus irgendeinem Grund). Dies ist ziemlich praktisch, denn wenn Sie JavaScript verwenden, um die Standardaktion zu verhindern, werden Sie sortiert.

Im Idealfall wäre dies das, was Sie brauchen:

// get all readonly inputs
var readOnlyInputs = document.querySelectorAll('input[readonly]');

// Function to fire when they're clicked
// We would use the focus handler but there is no focus event for readonly objects
function readOnlyClickHandler () {
    // make it not readonly
    this.removeAttribute('readonly');
}
// Function to run when they're blurred (no longer have a cursor
function readOnlyBlurHandler () {
    // make it readonly again
    this.setAttribute('readonly');
}
function readOnlyKeypressHandler (event) {
    // The user has just pressed a key, but we don't want the text to change
    // so we prevent the default action
    event.preventDefault();
}
// Now put it all together by attaching the functions to the events...

// We have to wrap the whole thing in a onload function.
// This is the simplest way of doing this...
document.addEventListener('load', function () {
    // First loop through the objects
    for (var i = 0; i < readOnlyInputs.length; i++) {
        // add a class so that CSS can style it as readonly
        readOnlyInputs[i].classList.add('readonly');
        // Add the functions to the events
        readOnlyInputs[i].addEventListener('click', readOnlyClickHandler);
        readOnlyInputs[i].addEventListener('blur', readOnlyBlurHandler);
        readOnlyInputs[i].addEventListener('keypress', readOnlyKeypressHandler);
    }
});

Kopieren Sie dies einfach und fügen Sie dies ein und es sollte in Firefox oder Chrome gut funktionieren. Der Code ist Standards konform, aber Internet Explorer ist es nicht. Das funktioniert also nicht in IE (außer vielleicht Versionen 9 und 10 ... nicht sicher). Auch die classList.add Bit funktioniert außer einigen der neuesten Browserversionen nicht in allen. Also müssen wir diese Teile ändern. Zuerst werden wir die anpassen readOnlyKeypressHandler Funktion, weil event.preventDefault() Funktioniert nicht für jeden Browser.

function readOnlyKeypressHandler (event) {
    if (event && event.preventDefault) {
        // This only runs in browsers where event.preventDefault exists,
        // so it won't throw an error
        event.preventDefault();
    }
    // Prevents the default in all other browsers
    return false;
}

Nun, um die zu ändern classList bisschen.

    // add a class so that CSS can style it as readonly
    if (readOnlyInputs[i].classList) {
        readOnlyInputs[i].classList.add('readonly');
    } else {
        readOnlyInputs[i].className += ' readonly';
    }

Ärgerlicherweise wird AddEventListener auch nicht in IE unterstützt, daher müssen Sie eine Funktion erfüllen, um diese separat zu verarbeiten (fügen Sie sie über die für die für die Schleife hinzu).

function addEvent(element, eventName, fn) {
    if (element.addEventListener) {
        element.addEventListener(eventName, fn, false);
    } else if (element.attachEvent) {
        // IE requires onclick instead of click, onfocus instead of focus, etc.
        element.attachEvent('on' + eventName, fn);
    } else {
        // Much older browsers
        element['on' + eventName] = fn;
    }
}

Ändern Sie dann das Hinzufügen von Ereignissen:

    addEvent(readOnlyInputs[i], 'click', readOnlyClickHandler);
    addEvent(readOnlyInputs[i], 'blur', readOnlyBlurHandler);
    addEvent(readOnlyInputs[i], 'keypress', readOnlyKeypressHandler);

Und geben Sie der Dokumentlastfunktion einen Namen, anstatt ihn anzurufen addEventListener:

function docLoadHandler () {
    ...
}

Und nenn es am Ende

addEvent(document, 'load', docLoadHandler);

Und sobald Sie das getan haben, sollte es in allen Browsern funktionieren.

Verwenden Sie jetzt einfach CSS, um das zu stylen readonly Klasse, um den Umriss in Browsern wegzunehmen, die einen zeigen:

.readonly:focus {
    outline: none;
    cursor: default;
}

Answer 2

Machen Sie den Textbereich nicht vorlesen. Das habe ich getan:

<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>

, dann in Ihrem JavaScript mit JQuery:

$('#mytextarea').keypress(function(event){
    event.preventDefault();
});

Answer 3

Das CSS -Eigentum overflow Legt das Bildlaufverhalten und zum Beispiel das Bildlaufverhalten fest overflow: auto Zeigen Sie nur Scrollbars an, wenn sich der Inhalt über den Bereich hinaus erstreckt. Mit overflow: scroll Sie erhalten jedes Mal die Bildlaufleisten.

Answer 4

Definieren Sie die Höhe für Ihren Container -Div von Text und verwenden Sie Überlauf: Automatisch etwas wie unten CSS -Code.

.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}

Answer 5

Verwenden Sie ein Textbereich anstelle eines Eingangstextfeldes. Sie können nicht zu einem Textfeld scrollen

<textarea cols="50" rows="5" ></textarea>

Answer 6

wenn http://jsfiddle.net/msmailbox/jbgne/ Dies ist, was Sie brauchten, dann können Sie dies mit Div versuchen.

<div id="alo">sfbskdgksfbgkjsfngndflgndfgldfngldfgldfg</div>

mit CSS

#alo
{
    width:100px;
    overflow-x:scroll;
    overflow-y:hidden;
}