我有一个我已经做了READONLY的HTML文本字段。事情是,虽然说,该领域只有100像素宽。例如,我有一个句子没有显示在那100个像素中。由于它是READONLY,它不能滚动。如何使HTML文本字段只读,但也可滚动?
换句话说。我怎样才能让这个领域不可编辑。但也使得不适合现场的更长的字符串是可见的?
谢谢!
我有一个我已经做了READONLY的HTML文本字段。事情是,虽然说,该领域只有100像素宽。例如,我有一个句子没有显示在那100个像素中。由于它是READONLY,它不能滚动。如何使HTML文本字段只读,但也可滚动?
换句话说。我怎样才能让这个领域不可编辑。但也使得不适合现场的更长的字符串是可见的?
谢谢!
有一些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做工精细。代码是符合标准,但Internet Explorer不符合。所以这不会在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
类带走轮廓在浏览器中显示其中一个:
.readonly:focus {
outline: none;
cursor: default;
}
高度定义为文本和使用溢出的容器DIV:汽车像下面的CSS代码。
.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}
使用Textarea而不是输入文本框。 ü不能添加滚动到一个文本框
<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;
}
不要让textarea的只读。这是我做过什么:
<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>
,然后在你的JavaScript,使用jQuery:
$('#mytextarea').keypress(function(event){
event.preventDefault();
});
你是什么意思的领域? http://jsfiddle.net/hbKBD/ 例如,文本框是可滚动的))) –
是的完全像你的例子。但是检查一下,确定这个东西不可编辑,这很好。但是,由于文本字段太短而无法显示整个字符串,因此会断开一段字符串。你如何解决这个问题?在你的例子中,我不能滚动等。 – Tiwaz89
你可以用鼠标滚动它...只选择文本 –