如何使HTML文本字段只讀，但也可滾動？

Question

我有一個我已經做了READONLY的HTML文本字段。事情是，雖然說，該領域只有100像素寬。例如，我有一個句子沒有顯示在那100個像素中。由於它是READONLY，它不能滾動。

換句話說。我怎樣才能讓這個領域不可編輯。但也使得不適合現場的更長的字符串是可見的？

謝謝！

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要麼，所以你需要一個函數來分別處理這（增加它上面的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

CSS屬性overflow設置滾動行爲，例如overflow: auto僅當內容超出區域時才顯示滾動條。隨着overflow: scroll你每次都得到滾動條。

Answer 3

高度定義爲文本和使用溢出的容器DIV：汽車像下面的CSS代碼。

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

Answer 4

使用Textarea而不是輸入文本框。 ü不能添加滾動到一個文本框

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

Answer 5

如果http://jsfiddle.net/msmailbox/jBGne/這是你需要什麼，然後你可以用DIV試試這個。

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

與CSS

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

Answer 6

不要讓textarea的只讀。這是我做過什麼：

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

，然後在你的JavaScript，使用jQuery：

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