1

我正在使用 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>

这是使用的css类

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

这是jsfiddle的链接

4

3 回答 3

3

您可以使用只读属性吗？这样就不需要覆盖：

<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-24T09:02:12.827 回答
1

来自 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属性添加到您的文本区域

于 2013-09-24T09:03:08.903 回答
1

为什么不直接使用disabled="disabled"textarea 上的属性？我认为它完全符合您试图在 JS 中创建的功能。

于 2013-09-24T09:02:21.977 回答