Come rendere campo di testo HTML di sola lettura, ma anche scorrevole?

Question

Ho un campo di testo HTML che ho fatto di sola lettura. Fatto è, però, che dire il campo è solo un 100 pixel. E ho una frase ad esempio, che non viene visualizzata in quel 100 pixel. Dal momento che è READONLY it't non scorrevole.

In altre parole. Come posso avere ancora il campo non modificabile. Ma anche fare in modo che è stringhe più lunghe che non rientrano nel campo, siano visibili?

grazie!

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

Answer 2

Do not make the textarea readonly. This is what I did:

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

,then in your JavaScript, using jQuery:

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

Answer 3

The CSS property overflow sets the scroll behaviour, and for example overflow: auto only display scrollbars when the content extends beyond the area. With overflow: scroll you get the scrollbars every time.

Answer 4

Define height for your container div of text and use overflow:auto something like below css code.

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

Answer 5

Use a Textarea instead of a input textfield. U cant add scroll to a textfield

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

Answer 6

if http://jsfiddle.net/msmailbox/jBGne/ this is what you needed then you can try this with div.

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

with css

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