¿Cómo hacer que el campo de texto HTML sea lectura, pero también desplazable?

Question

Tengo un campo de texto HTML que he hecho Readonly. Sin embargo, la cosa es que eso dice que el campo tiene solo 100 píxeles de ancho. Y tengo una oración, por ejemplo, que no se muestra en esos 100 píxeles. Ya que es lectura no es desplazable.

En otras palabras. ¿Cómo puedo tener el campo no editable? Pero también es para que las cadenas más largas que no encajen en el campo, ¿se pueden ver?

¡Gracias!

Answer 1

Hay algunos JavaScript que puedes usar. A menos que esté usando un marco, se vería bastante feo, porque no es trivial.

El javascript keypress El evento se desencadena cuando se presiona una tecla, pero no se desencadena para las teclas del cursor (por alguna razón). Esto es bastante útil, porque si usa JavaScript para evitar la acción predeterminada, está ordenado.

Así que idealmente, esto sería lo que necesitas:

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

Simplemente copie y pegue esto y debería funcionar bien en Firefox o Chrome. El código es estándares que cumplen, pero Internet Explorer no lo es. Así que esto no funcionará en IE (excepto quizás las versiones 9 y 10 ... no estoy seguro de eso). También el classList.add Bit no funcionará en todas las versiones más recientes de los navegadores. Entonces tenemos que cambiar estos bits. Primero adaptaremos el readOnlyKeypressHandler función, porque event.preventDefault() No funciona para cada navegador.

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

Ahora para cambiar el classList un poco.

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

Molesto, AddEventListener tampoco es compatible en IE, por lo que debe funcionar para manejar esto por separado (agrégalo por encima del bucle para el bucle)

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

Luego cambie el bit de adición de eventos:

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

Y le da un nombre a la función de carga del documento en lugar de llamarlo addEventListener:

function docLoadHandler () {
    ...
}

Y llámalo al final

addEvent(document, 'load', docLoadHandler);

Y una vez que hayas hecho eso, debería funcionar en todos los navegadores.

Ahora solo usa CSS para peinar el readonly clase para quitar el contorno en los navegadores que muestran uno:

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

Answer 2

No hagas que el Textea sea lectura. Esto es lo que hice:

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

, luego en tu JavaScript, usando jQuery:

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

Answer 3

La propiedad CSS overflow Establece el comportamiento de desplazamiento y, por ejemplo, overflow: auto Solo muestre barras de desplazamiento cuando el contenido se extiende más allá del área. Con overflow: scroll Obtienes las barras de desplazamiento cada vez.

Answer 4

Defina la altura para su contenedor Div de texto y use desbordamiento: Auto Algo como el código CSS debajo.

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

Answer 5

Use un TextAREA en lugar de un campo de texto de entrada. No puedes agregar desplazamiento a un campo de texto

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

Answer 6

si http://jsfiddle.net/msmailbox/jbgne/ Esto es lo que necesitabas, entonces puedes probar esto con Div.

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

con CSS

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