I've got an HTML text field that I have made READONLY. Thing is though, that say the field is only a 100 pixels wide. And I have a sentence for example that doesn't get displayed in that 100 pixels. Since it's READONLY it't not scrollable.
In other words. How can I still have the field not editable. But also make is so that longer strings that does not fit in the field, be viewable?
thanks!
Do not make the textarea readonly. This is what I did:
<textarea id="mytextarea" wrap="off" style="overflow:auto"></textarea>
,then in your JavaScript, using jQuery:
$('#mytextarea').keypress(function(event){
event.preventDefault();
});
There's some JavaScript you can use. Unless you're using a framework, it'd look pretty ugly though, because it isn't trivial.
The JavaScript keypress event triggers when a key is pressed, but it doesn't trigger for the cursor keys (for some reason). This is quite handy, because if you use JavaScript to prevent the default action, you're sorted.
So ideally, this would be what you need:
// 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);
}
});
Just copy and paste this and it should work fine in Firefox or Chrome. The code is standards compliant, but Internet Explorer isn't. So this won't work in IE (except maybe versions 9 and 10... not sure about that). Also, the classList.add bit won't work in all but a few of the most recent versions of browsers. So we have to change these bits. First we'll adapt the readOnlyKeypressHandler function, because event.preventDefault() doesn't work for every browser.
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;
}
Now to change the classList bit.
// 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';
}
Annoyingly, addEventListener isn't supported in IE either, so you need to make a function to handle this separately (add it above the for 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;
}
}
Then change the adding events bit:
addEvent(readOnlyInputs[i], 'click', readOnlyClickHandler);
addEvent(readOnlyInputs[i], 'blur', readOnlyBlurHandler);
addEvent(readOnlyInputs[i], 'keypress', readOnlyKeypressHandler);
And give the document load function a name instead of calling it in addEventListener:
function docLoadHandler () {
...
}
And call it at the end
addEvent(document, 'load', docLoadHandler);
And once you've done that, it should work in all browsers.
Now just use CSS to style the readonly class to take away the outline in browsers which show one:
.readonly:focus {
outline: none;
cursor: default;
}
if http://jsfiddle.net/msmailbox/jBGne/ this is what you needed then you can try this with div.
<div id="alo">sfbskdgksfbgkjsfngndflgndfgldfngldfgldfg</div>
with css
#alo
{
width:100px;
overflow-x:scroll;
overflow-y:hidden;
}
The CSS property overflow sets the scroll behaviour, and for example overflow: auto only display scrollbars when the content extends beyond the area. With overflow: scroll you get the scrollbars every time.
Use a Textarea instead of a input textfield. U cant add scroll to a textfield
<textarea cols="50" rows="5" ></textarea>
Define height for your container div of text and use overflow:auto something like below css code.
.yoruclass{
width:100px;
height:100px;/* stop text to go beyond the define height */
overflow:hidden;/* making text div scrollable */
}
