HTMLテキストフィールドを読み取る方法だけでなく、スクロール可能にする方法は?
-
25-10-2019 - |
質問
私は読み物にしたHTMLテキストフィールドを持っています。しかし、それは、フィールドの幅100ピクセルしかないと言っています。たとえば、その100ピクセルで表示されない文があります。読み取られているので、スクロール可能ではありません。
言い換えると。どのようにして、まだ編集可能ではないフィールドを持つことができますか。しかし、フィールドに収まらない長い弦が見えるようにすることもできますか?
ありがとう!
解決
使用できるJavaScriptがいくつかあります。フレームワークを使用していない限り、それは些細なことではないので、かなり醜いように見えます。
JavaScript keypress
キーが押されたときにイベントがトリガーされますが、カーソルキーをトリガーしません(何らかの理由で)。これは非常に便利です。なぜなら、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で正常に動作するはずです。コードはです 基準に準拠, 、しかし、インターネットエクスプローラーはそうではありません。したがって、これはIEでは機能しません(おそらくバージョン9と10を除く...それについてはわかりません)。また、 classList.add
BITは、ブラウザの最新のバージョンのいくつかを除いて、すべてに機能しません。したがって、これらのビットを変更する必要があります。最初に適応します 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ではサポートされていないため、これを個別に処理する機能を作成する必要があります(Loopの上に追加してください)
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
ブラウザのアウトラインを奪うクラスは、次のことを示しています。
.readonly:focus {
outline: none;
cursor: default;
}
他のヒント
Textareaを読み取らないでください。これが私がしたことです:
<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>
、javascriptで、jqueryを使用して:
$('#mytextarea').keypress(function(event){
event.preventDefault();
});
CSSプロパティ overflow
たとえば、スクロール動作を設定します overflow: auto
コンテンツがエリアを越えて伸びている場合にのみ、スクロールバーを表示します。と overflow: scroll
毎回スクロールバーを取得します。
テキストのコンテナDIVの高さを定義し、オーバーフローを使用します:以下のCSSコードのような自動。
.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}
入力テキストフィールドの代わりにテキストアレアを使用します。スクロールをテキストフィールドに追加することはできません
<textarea cols="50" rows="5" ></textarea>
もしも http://jsfiddle.net/msmailbox/jbgne/ これはあなたが必要としていたものであり、Divでこれを試すことができます。
<div id="alo">sfbskdgksfbgkjsfngndflgndfgldfngldfgldfg</div>
CSSで
#alo
{
width:100px;
overflow-x:scroll;
overflow-y:hidden;
}