Как сделать HTML -текстовое поле читаемым, но также прокручиваемое?
-
25-10-2019 - |
Вопрос
У меня есть текстовое поле HTML, которое я сделал Readonly. Дело в том, что это говорит, что поле шириной всего 100 пикселей. И у меня есть предложение, например, которое не отображается в этих 100 пикселях. Поскольку это не закручиваемо.
Другими словами. Как я могу еще иметь поле, не редактируемое. Но также сделать это так, что более длинные строки, которые не вписываются в поле, можно было бы просматривать?
Благодарность!
Решение
Есть какой -то 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;
}
Другие советы
Не делайте Textarea Readonly. Это то, что я сделал:
<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>
, затем в вашем JavaScript, используя jQuery:
$('#mytextarea').keypress(function(event){
event.preventDefault();
});
Собственность CSS overflow
Устанавливает поведение прокрутки и, например, overflow: auto
Отображают полосы прокрутки только тогда, когда контент простирается за пределы области. С overflow: scroll
Вы получаете полосы прокрутки каждый раз.
Определите высоту для вашего контейнера Div текста и используйте переполнение: Авто что -то вроде CSS -кода.
.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}
Используйте Textarea вместо входного текстового поля. Ты не можешь добавить свиток в текстовое поле
<textarea cols="50" rows="5" ></textarea>
если http://jsfiddle.net/msmailbox/jbgne/ Это то, что вам нужно, тогда вы можете попробовать это с Div.
<div id="alo">sfbskdgksfbgkjsfngndflgndfgldfngldfgldfg</div>
с CSS
#alo
{
width:100px;
overflow-x:scroll;
overflow-y:hidden;
}