如何使HTML文本字段只读,但也可滚动？

Question

我有一个HTML文本字段,我已经做了READONLY.然而,事实上,该领域只有100像素宽.我有一个句子,例如,没有显示在100像素.因为它是READONLY它不可滚动.

换一种说法.我怎么还能让这个字段不可编辑.但是也可以这样做,以便更长的字符串不适合在该领域,可见？

谢谢!

Answer 1

您可以使用一些 JavaScript。除非您使用框架，否则它看起来会很丑陋，因为它并不简单。

JavaScriptkeypress事件在按下某个键时触发，但不会针对光标键触发（由于某种原因）。这非常方便，因为如果您使用 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';
    }

令人烦恼的是，IE 也不支持 addEventListener，因此您需要创建一个函数来单独处理此问题（将其添加到 for 循环上方）

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