Comment faire champ de texte HTML en lecture seule, mais aussi scrollable?

Question

J'ai un champ de texte HTML que je l'ai fait en lecture seule. La chose est cependant, que dire le champ est seulement 100 pixels de large. Et j'ai une phrase par exemple qui ne soit pas affiché en ce que 100 pixels. Comme il est READONLY it't pas scrollable.

En d'autres termes. Comment puis-je avoir encore le champ non modifiable. Mais aussi faire est donc que les chaînes plus longues qui ne rentre pas dans le champ, être visible?

merci!

Answer 1

Il y a un peu de JavaScript vous pouvez utiliser. À moins que vous utilisez un cadre, il avait l'air bien assez laid, parce que ce n'est pas trivial.

Le JavaScript déclenche événement keypress lorsqu'une touche est enfoncée, mais il ne justifie pas la pour les touches de curseur (pour une raison quelconque). Ceci est très pratique, parce que si vous utilisez JavaScript pour empêcher l'action par défaut, vous triées.

Donc, idéalement, ce serait ce dont vous avez besoin:

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

Il suffit de copier et coller ce et il devrait fonctionner correctement dans Firefox ou Chrome. Le code est conforme aux normes , mais Internet Explorer n'est pas. Donc, cela ne fonctionnera pas dans IE (sauf peut-être les versions 9 et 10 ... pas sûr). En outre, le bit classList.add ne fonctionne pas dans tous, mais quelques-unes des plus récentes versions des navigateurs. Nous devons donc changer ces bits. D'abord, nous allons adapter la fonction de readOnlyKeypressHandler, car event.preventDefault() ne fonctionne pas pour tous les navigateurs.

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

Maintenant, pour changer le bit classList.

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

Fâcheusement, addEventListener est pas pris en charge dans Internet Explorer soit, vous devez faire une fonction pour gérer cette séparément (ajouter au-dessus de la boucle)

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

Modifiez ensuite les événements en ajoutant bit:

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

Et donner la fonction de charge du document un nom au lieu de l'appeler dans addEventListener:

function docLoadHandler () {
    ...
}

Et appeler à la fin

addEvent(document, 'load', docLoadHandler);

Et une fois que vous avez fait cela, il devrait fonctionner dans tous les navigateurs.

Maintenant, il suffit d'utiliser le style CSS pour la classe readonly pour enlever les grandes lignes dans les navigateurs qui montrent un:

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

Answer 2

Ne pas faire les textarea en lecture seule. Voilà ce que je l'ai fait:

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

, puis dans votre JavaScript, en utilisant jQuery:

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

Answer 3

La propriété CSS overflow définit le comportement de défilement, et par exemple overflow: auto afficher uniquement les barres de défilement lorsque le contenu va au-delà de la zone. Avec overflow: scroll vous obtenez les barres de défilement à chaque fois.

Answer 4

Définir la hauteur de votre conteneur div de débordement de texte et de l'utilisation:. Quelque chose automobile comme ci-dessous le code css

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

Answer 5

Utiliser une zone de texte au lieu d'un champ de texte d'entrée. U cant ajouter à un rouleau textfield

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

Answer 6

http://jsfiddle.net/msmailbox/jBGne/ c'est ce que vous avez besoin alors vous pouvez essayer avec div.

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

avec css

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