Solved

read only text area or alternative

Posted on 2011-03-09
11
268 Views
Last Modified: 2012-05-11
I have a site where there are conditions in a text area. I have set the text area to read only but noticed when you press the backspace it then takes you to the previous page.

Is there a way to prevent this (non js if possible) or maybe an alternative to textarea? kinda like the box I'm typing in right now but read only.
0
Comment
Question by:Shawn
  • 6
  • 5
11 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 35086933
You could just put the content in a div, give it a width and height and then add overflow: visible which will allow it to scroll.  
0
 
LVL 1

Author Comment

by:Shawn
ID: 35087082
sounds good. do you have a quick example. never done that before and I'm not too hot with borders in css.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 35087131
Something like this would work:


CSS

	#textArea {
		width:500px; /*Change to suit your needs */
		height:250px;/*Change to suit your needs */
		clear:both;
		border:1px inset #333;
		}

Open in new window

HTML: 

<div id="textArea">
Your content here 
</div>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Shawn
ID: 35087252
I get the box and text but the text goes out of the box rather then having the side bar appear.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 35087263
Add overflow:scroll;
0
 
LVL 1

Author Comment

by:Shawn
ID: 35087293
ok, I have the box looking nice now but I still have the same backspace behavior.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 35087328
Unfortunately the only way to completely disable the backspace key would be Javascript.  It's a default function of the browser itself, as far as I understand it.  
0
 
LVL 1

Author Comment

by:Shawn
ID: 35087360
i suppose I could use js. At least it could change that function. any ideas?
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 35087403
I got this code from here: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20276433.html 


Try this:
<script>
function checkShortcut()
{
                  if(event.keyCode==8 || event.keyCode==13)
         {
               return false;
         }
}
 </script>
<body onkeydown="return checkShortcut()">

Open in new window

0
 
LVL 1

Author Closing Comment

by:Shawn
ID: 35087432
it all works perfect now. thank you
0
 
LVL 30

Expert Comment

by:LZ1
ID: 35087441
Glad I could help!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question