Как сделать HTML -текстовое поле читаемым, но также прокручиваемое?

Question

У меня есть текстовое поле HTML, которое я сделал Readonly. Дело в том, что это говорит, что поле шириной всего 100 пикселей. И у меня есть предложение, например, которое не отображается в этих 100 пикселях. Поскольку это не закручиваемо.

Другими словами. Как я могу еще иметь поле, не редактируемое. Но также сделать это так, что более длинные строки, которые не вписываются в поле, можно было бы просматривать?

Благодарность!

Answer 1

Есть какой -то JavaScript, который вы можете использовать. Если вы не используете структуру, это будет выглядеть довольно уродливо, потому что это не тривиально.

JavaScript keypress Событие запускается, когда нажата клавиша, но она не запускает клавиши курсора (по какой -то причине). Это довольно удобно, потому что, если вы используете JavaScript, чтобы предотвратить действие по умолчанию, вы отсортировали.

Так что в идеале это было бы то, что вам нужно:

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

Просто скопируйте и вставьте это, и это должно хорошо работать в Firefox или Chrome. Код есть Стандарты, соответствующие, но Internet Explorer нет. Так что это не будет работать в IE (кроме, может быть, версии 9 и 10 ... не уверен в этом). Так же classList.add Бит не будет работать во всех, кроме некоторых из самых последних версий браузеров. Поэтому мы должны изменить эти биты. Сначала мы адаптируем readOnlyKeypressHandler функция, потому что event.preventDefault() не работает для каждого браузера.

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

Теперь изменить 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';
    }

Досадно, что AddeventListener также не поддерживается в IE, поэтому вам нужно выполнить функцию, чтобы справиться с этим отдельно (добавьте его выше цикла)

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

Затем измените бит с добавлением событий:

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

И дайте функции загрузки документа имя вместо того, чтобы называть его addEventListener:

function docLoadHandler () {
    ...
}

И назовите это в конце

addEvent(document, 'load', docLoadHandler);

И как только вы это сделаете, это должно работать во всех браузерах.

Теперь просто используйте CSS, чтобы стилизовать readonly Класс, чтобы забрать контур в браузерах, которые показывают один:

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

Answer 2

Не делайте Textarea Readonly. Это то, что я сделал:

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

, затем в вашем JavaScript, используя jQuery:

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

Answer 3

Собственность CSS overflow Устанавливает поведение прокрутки и, например, overflow: auto Отображают полосы прокрутки только тогда, когда контент простирается за пределы области. С overflow: scroll Вы получаете полосы прокрутки каждый раз.

Answer 4

Определите высоту для вашего контейнера Div текста и используйте переполнение: Авто что -то вроде CSS -кода.

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

Answer 5

Используйте Textarea вместо входного текстового поля. Ты не можешь добавить свиток в текстовое поле

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

Answer 6

если http://jsfiddle.net/msmailbox/jbgne/ Это то, что вам нужно, тогда вы можете попробовать это с Div.

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

с CSS

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