7

読み取り専用にしたHTMLテキストフィールドがあります。ただし、フィールドの幅は100ピクセルしかないということです。たとえば、その100ピクセルで表示されない文があります。読み取り専用なので、スクロールできません。

言い換えると。フィールドを編集できないようにするにはどうすればよいですか。しかし、makeは、フィールドに収まらない長い文字列が表示されるようにするためのものですか？

ありがとう！

4

6 に答える 6

4

使用できるJavaScriptがいくつかあります。フレームワークを使用していない限り、それは些細なことではないので、かなり醜いように見えます。

JavaScriptkeypressイベントは、キーが押されたときにトリガーされますが、カーソルキーに対してはトリガーされません（何らかの理由で）。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で正常に機能するはずです。コードは標準に準拠していますが、InternetExplorerは準拠していません。したがって、これは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クラスのスタイルを設定し、次の1つを表示するブラウザーのアウトラインを削除します。

.readonly:focus {
    outline: none;
    cursor: default;
}
于 2011-11-29T11:05:32.737 に答える
3

textareaを読み取り専用にしないでください。これは私がしたことです：

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

次に、JavaScriptでjQueryを使用します。

$('#mytextarea').keypress(function(event){
    event.preventDefault();
});
于 2014-04-19T17:10:40.923 に答える
2

http://jsfiddle.net/msmailbox/jBGne/これが必要なものである場合は、divでこれを試すことができます。

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

cssで

#alo
{
    width:100px;
    overflow-x:scroll;
    overflow-y:hidden;
}
于 2011-11-29T11:11:58.610 に答える
1

CSSプロパティoverflowは、スクロールの動作を設定します。たとえばoverflow: auto、コンテンツが領域を超えている場合にのみスクロールバーを表示します。overflow: scroll毎回スクロールバーを取得します。

于 2011-11-29T09:04:58.127 に答える
0

テキストのコンテナdivの高さを定義し、以下のcssコードのようなoverflow：autoを使用します。

.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}
于 2011-11-29T10:04:19.497 に答える
0

入力テキストフィールドの代わりにTextareaを使用します。テキストフィールドにスクロールを追加できません

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

于 2011-11-29T10:26:36.133 に答える