1

CSS クラスを使用して Web フォームのテキストエリアを無効にしています。直面している問題は、コンテンツが特定の制限を超えるとテキストエリアがスクロールし、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

また

テキストエリアを書き込み可能にするつもりがないのなら、なぜテキストエリアを使うのでしょうか? ブロック要素を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

スクロールバーにもオーバーレイを適用するため、テキストエリアのスクロールバーは無効になっています。

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"テキストエリアで属性を使用しないのはなぜですか? JSで作成しようとしたこととまったく同じだと思います。

于 2013-09-24T09:02:21.977 に答える