Question

我正在使用css类在我的网络表单上禁用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

的链接

Answer 1

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

<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

当然，这只会使用鼠标滚轮，所以如果你想点击它，你需要找到一种方法来将叠加层调整到滚动条的大小，但是我会把它留给你作为你的下一个挑战。

Answer 2

为什么不在textarea上使用属性disabled="disabled"？我认为它完全符合您在JS中创建的内容。

Answer 3

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

在文本区域中启用滚动

3 个答案: