?
Solved

Disable keyboard entry on date field.  Force use of calendar popup

Posted on 2009-02-20
9
Medium Priority
?
793 Views
Last Modified: 2012-06-21
Hi folks,

Is it possible to disable people from attempting to type dates into a HTML field and instead just make them use the javascript calendar popup?
0
Comment
Question by:Jason C. Levine
9 Comments
 
LVL 27

Expert Comment

by:Cornelia Yoder
ID: 23695565
How about just removing the "HTML field" where you don't want them to enter anything, and just leave the calendar?
0
 
LVL 9

Expert Comment

by:brunoguimaraes
ID: 23695569
You could try some of the following:


<!-- This way, whenever the field gains focus, it automatically loses focus  -->
<input type="text" id="date" onfocus="this.blur();" />
 
<!-- This way, the user cannot type anything -->
<input type="text" id="date" onkeypress="return false;" />

Open in new window

0
 
LVL 3

Expert Comment

by:KMusatoff
ID: 23695894
readonly
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Accepted Solution

by:
KMusatoff earned 2000 total points
ID: 23695919
the option you are asking for is <input type="text" .... readonly />

the problem is in clearing the field if date entry is not needed but had been inserted... The better solution is to let users enter the date manually and then, onBlur let javascript check if the date entered is valid

that way you give users more control over the form entry and also keep an option of clearing the entry
0
 
LVL 70

Author Comment

by:Jason C. Levine
ID: 23698684
So declaring a field as readonly will still allow the javascript date-picker to write the value chosen into the field?
0
 
LVL 3

Expert Comment

by:KMusatoff
ID: 23707866
"So declaring a field as readonly will still allow the javascript date-picker to write the value chosen into the field?"

Yes... as javascript is probably using element.value = ''; and "readonly" blocks user input only
0
 
LVL 70

Author Comment

by:Jason C. Levine
ID: 23708711
Alrighty.  Will test and report back tomorrow night.

Thanks to all who have submitted to this point.  I really appreciate your taking the time to assist me.
0
 
LVL 70

Author Comment

by:Jason C. Levine
ID: 23718388
Setting the field to readdonly worked.  I was under the impression that the field would not accept any data if I used that attribute.  Happy to be wrong.
0
 
LVL 70

Author Closing Comment

by:Jason C. Levine
ID: 31549393
Nice and easy.  My favorite kind of solution.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

850 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