在文本區域中啓用滾動

我正在使用css類來禁用我的web表單上的textarea。我面臨的問題是當內容高於某個限制時，文本區域會滾動並且當我禁用文本區域使用CSS，滾動也禁用。我只希望文本區域禁用而不是滾動。我希望只有在禁用模式下才能讀取整個數據。在文本區域中啓用滾動

下面是HTML代碼

<div class="ast"> 
<div class="notEdit-overlay"></div> 
<textarea id="txtBiography" class="TextArea100Per"> 
    Harry Potter is a series of seven fantasy novels written by the British author J. K. Rowling. The books chronicle the adventures of a wizard, Harry Potter, and his friends Ronald Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's quest to overcome the Dark wizard Lord Voldemort, whose aims are to become immortal, conquer the wizarding world, subjugate non-magical people, and destroy all those who stand in his way, especially Harry Potter. 
Since the release of the first novel, Harry Potter and the Philosopher's Stone, on 30 June 1997, the books have gained immense popularity, critical acclaim and commercial success worldwide.[2] The series has also had some share of criticism, including concern for the increasingly dark tone. As of June 2011, the book series has sold about 450 million copies, making it the best-selling book series in history, and has been translated into 67 languages.[3][4] The last four books consecutively set records as the fastest-selling books in history. 
A series of many genres, including fantasy, coming of age, and the British school story (with elements of mystery, thriller, adventure, and romance), it has many cultural meanings and references.[5][6][7][8] According to Rowling, the main theme is death.[9] There are also many other themes in the series, such as prejudice and corruption.[10] 
The series was originally printed in English by two major publishers, Bloomsbury in the United Kingdom and Scholastic Press in the United States. The books have since been published by many publishers worldwide. The books, with the seventh book split into two parts, have been made into an eight-part film series by Warner Bros. Pictures, the highest-grossing film series of all time. The series also originated much tie-in merchandise, making the Harry Potter brand worth in excess of $15 billion.[11] Also, due to the success of the books and films, Harry Potter has been used for a theme park, The Wizarding World of Harry Potter in Universal Parks & Resorts' Islands of Adventure. 
</textarea> 
</div>

，這裏是用來

.TextArea100Per 
{ 
    border: none; 
    font: normal 15px/16px "HelveticaNeueLTCom45Light" , Georgia,serif; 
    margin: 8px 0 15px 0; 
    padding: 7px 4px 8px 10px; 
    color: #6d6e71; 
    width: 98.6%; 
    height: 225px; 
} 
.notEdit-overlay 
{ 
    width: 1080px; 
    height: 99%; 
    left: 0px; 
    background: red; 
    position: absolute; 
    opacity: 0; 
    filter: alpha(opacity=1); 
} 
.ast{ 
    position: relative; 
}

的CSS類這裏是jsfiddle

來源

2013-09-24 iJade

不是禁用文本區域的正確方法。 – avrahamcool

@avrahamcool頁面有一些控件，因此使用覆蓋 – iJade

一個鏈接，您可以使用只讀屬性？這樣，沒有必要針對疊層：

<textarea id="txtBiography" class="TextArea100Per" readonly> 
    Content 
</textarea>

JSFiddle

如果你從來沒有打算讓textarea的可寫的，爲什麼要使用textarea的呢？你可能也只是使用一個塊級元素與overflow-y:auto：

JSFiddle

編輯：

如果你真的想使用覆蓋來模擬#txtBiography滾動，你可以使用這個jQuery的：

$('.notEdit-overlay').on('mousewheel', function(e){ 
    d = e.originalEvent.wheelDelta; 
    $('#txtBiography')[0].scrollTop -= (d/2); 
});

JSFiddle

這當然只會使用鼠標滾輪，所以如果您想要點擊鼠標滾輪，您需要制定一種方法來調整滾動條的覆蓋範圍，但我會將其留給您作爲你的下一個挑戰。

來源

2013-09-24 09:02:12 George

你誤解了這個問題。我希望滾動工作，當我使用覆蓋，但是當我刪除覆蓋它應該能夠輸入數據 – iJade

請看我的更新。 – George

你爲什麼不在textarea上使用屬性disabled="disabled"？我認爲它確實是你試圖在JS中創建的。

來源

2013-09-24 09:02:21

從textarea滾動條被禁用，因爲您也在滾動條上應用重疊。

更改CSS

.notEdit-overlay 
{ 
    width: 98.6%; // here was your mistake, you put 1080px 
    height: 99%; 
    left: 0px; 
    background: red; 
    position: absolute; 
    opacity: 0; 
    filter: alpha(opacity=1); 
}

http://jsfiddle.net/MDFuB/2/

或者添加readonly屬性，您的textarea

來源

2013-09-24 09:03:08

在文本區域中啓用滾動

回答

相關問題