如何使HTML文本字段阅读，但也可以滚动？

Question

我有一个我已经阅读的HTML文本字段。事实是，那个领域只有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 BIT除了最近的一些浏览器版本外，BIT无法正常工作。因此，我们必须更改这些位。首先，我们会适应 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;
}

Answer 2

不要让文本式阅读。这就是我所做的：

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