How to make HTML text field readonly, but also scrollable?

Question

I've got an HTML text field that I have made READONLY. Thing is though, that say the field is only a 100 pixels wide. And I have a sentence for example that doesn't get displayed in that 100 pixels. Since it's READONLY it't not scrollable.

In other words. How can I still have the field not editable. But also make is so that longer strings that does not fit in the field, be viewable?

thanks!

Answer 1

There's some JavaScript you can use. Unless you're using a framework, it'd look pretty ugly though, because it isn't trivial.

The JavaScript keypress event triggers when a key is pressed, but it doesn't trigger for the cursor keys (for some reason). This is quite handy, because if you use JavaScript to prevent the default action, you're sorted.

So ideally, this would be what you need:

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

Just copy and paste this and it should work fine in Firefox or Chrome. The code is standards compliant, but Internet Explorer isn't. So this won't work in IE (except maybe versions 9 and 10... not sure about that). Also, the classList.add bit won't work in all but a few of the most recent versions of browsers. So we have to change these bits. First we'll adapt the readOnlyKeypressHandler function, because event.preventDefault() doesn't work for every 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;
}

Now to change the 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';
    }

Annoyingly, addEventListener isn't supported in IE either, so you need to make a function to handle this separately (add it above the for loop)

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

Then change the adding events bit:

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

And give the document load function a name instead of calling it in addEventListener:

function docLoadHandler () {
    ...
}

And call it at the end

addEvent(document, 'load', docLoadHandler);

And once you've done that, it should work in all browsers.

Now just use CSS to style the readonly class to take away the outline in browsers which show one:

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