Wie man HTML-text-Feld readonly, aber auch scrollbare?

Gibt es einige JavaScript, die Sie verwenden können. Es sei denn, Sie sind mit einem Rahmen, es würde hübsch Aussehen, hässlich, obwohl, weil es ist nicht trivial.

JavaScript keypress Ereignis wird ausgelöst, wenn eine Taste gedrückt wird, aber es wird nicht ausgelöst, für die cursor-Tasten (aus irgendeinem Grund). Das ist Recht praktisch, denn wenn Sie JavaScript verwenden, um zu verhindern, dass die Standard-Aktion, Sie sind sortiert.

Also im Idealfall wäre dies, 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);
    }
});

Einfach kopieren und einfügen und es sollte funktionieren, im Firefox oder Chrome. Der code ist standards konform, aber Internet Explorer nicht. Also das funktioniert nicht im IE (außer vielleicht die Versionen 9 und 10... da nicht so sicher). Auch die classList.add bit funktioniert nicht in alle, aber ein paar von den neuesten Browser-Versionen. Müssen wir also ändern dieser bits. Zuerst werden wir die Anpassung der readOnlyKeypressHandler Funktion, weil event.preventDefault() funktioniert nicht bei jedem 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 ändern classList bit.

    //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';
    }

Dummerweise addEventListener nicht unterstützt in IE, so dass Sie brauchen, um eine Funktion zu handhaben, separat (fügen Sie es oberhalb der for-Schleife)

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;
    }
}

Dann ändern Sie die Ereignisse hinzufügen bit:

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

Und geben Sie die Dokument-Funktion laden Sie einen Namen anstelle von aufrufen in addEventListener:

function docLoadHandler () {
    ...
}

Und nennen es am Ende

addEvent(document, 'load', docLoadHandler);

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

Nun einfach über CSS die readonly Klasse zu nehmen, die Gliederung in Browsern, die zeigen eins:

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

Die CSS-Eigenschaft overflow setzt das scroll-Verhalten, und zum Beispiel overflow: auto nur die Anzeige der scrollbars, wenn der Inhalt erstreckt sich über das Gebiet. Mit overflow: scroll erhalten Sie die scrollbars-jedes mal.

Verwenden Sie eine Textarea statt eines input-Textfeldes. U cant hinzufügen scrollen Sie zu einem textfield

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