我有一个只读的 HTML 文本字段。事情是这样的,也就是说该字段只有 100 像素宽。例如,我有一个句子没有显示在 100 像素中。因为它是只读的,所以它不能滚动。
换句话说。我怎样才能让该字段仍然不可编辑。还要使不适合该字段的较长字符串可见吗?
谢谢!
我有一个只读的 HTML 文本字段。事情是这样的,也就是说该字段只有 100 像素宽。例如,我有一个句子没有显示在 100 像素中。因为它是只读的,所以它不能滚动。
换句话说。我怎样才能让该字段仍然不可编辑。还要使不适合该字段的较长字符串可见吗?
谢谢!
您可以使用一些 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 中正常工作。该代码符合标准,但 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';
}
烦人的是,IE 也不支持 addEventListener ,因此您需要创建一个函数来单独处理它(将其添加到 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;
}
不要将 textarea 设为只读。这就是我所做的:
<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>
,然后在你的 JavaScript 中,使用 jQuery:
$('#mytextarea').keypress(function(event){
event.preventDefault();
});
如果http://jsfiddle.net/msmailbox/jBGne/这是你需要的,那么你可以用 div 试试这个。
<div id="alo">sfbskdgksfbgkjsfngndflgndfgldfngldfgldfg</div>
用CSS
#alo
{
width:100px;
overflow-x:scroll;
overflow-y:hidden;
}
CSS 属性overflow
设置滚动行为,例如overflow: auto
仅在内容超出区域时显示滚动条。overflow: scroll
每次都有滚动条。
定义文本容器 div 的高度并使用 overflow:auto 类似于下面的 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>