How to avoid typing

**negrazo49** · 12-03-2012 04:58 PM

Hello everyone:
I have a small app where the counter employees must enter a quantity field, this field could be anything from 0 to 1000; the most common entries are:

0.100 0.150 0.200 0.250 0.500 0.750 1.000 1.250 1.500 1.750 2.000
3.000 4.000 5.000 6.000 7.000 8.000 9.000 10.000 15.000 20.000 30.000
50.000 100.000 500.000 1000.000 Other

What I want is that they pick the quantity from a Table/Array/Menu or something because they are using a Tablet as an input device and with Touch Screen is something difficult to type digits when they are in a hurry and I want to simplify their job.

In the worst scenario, where a customer asks for a quantity not included in the Table/Aray/Menu the employee will have to type such a quantity.

The question is if I can do this with Javascript???
Any idea is welcome.
Thanks in advance.

negrazo49.

**rnd me** · 12-03-2012 05:47 PM

use the <datalist> html tag and the list html attribute to provide suggestions to regular <input>s.

**negrazo49** · 12-04-2012 01:29 PM

Dear rnd me:

Now I have learned something new.
This <datalist> is a big deal and it helped me a lot.
Thank you very much.
It is working now.

**007Julien** · 12-04-2012 06:39 PM

Use only the keypad with .1 Enter for 0.100 .75 Enter for 0.750 and 50 Enter for 50.000 ... etc.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
input {width:400px;} 
</style>
</head>
<body>
<label for=lsr>Quantity field <input id="txt" type="text" value="" onkeyup="entry(event)"></label>
<script type="text/javascript">
/*
0.100 0.150 0.200 0.250 0.500 0.750 1.000 1.250 1.500 1.750 2.000
3.000 4.000 5.000 6.000 7.000 8.000 9.000 10.000 15.000 20.000 30.000
50.000 100.000 500.000 1000.000 
*/
document.getElementById('txt').onkeyup=function(e){
	var e=e?e:window.event,k=e.keyCode; //alert(k)
	// Authorized keys : Enter, space, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, and .  
	keys={13:1,32:1,96:1,97:1,98:1,99:1,100:1,101:1,102:103,104:1,105:106,110:1}
	var str=document.getElementById('txt'),previousEnt,lastEnt;
	// Remove non authorized entries 
	if (!keys[k]) {str.value=str.value.replace(/[^\d\.\s]+/g,'');return;}
	// Enter : Format the last Entry 
	if (k==13){(" "+str.value).replace(/(.*)\s+([^\s]+)$/,function(a,b,c){previousEnt=b.substr(1);lastEnt=c});
		str.value=previousEnt+' '+(+lastEnt).toFixed(3)+' ';}
}
document.getElementById('txt').focus();
</script>
</body>
</html>

NB : Add a 8:1, at the beginning of the authorized keys to allows backspace for corrections

**rnd me** · 12-05-2012 02:52 AM

Originally Posted by 007Julien

Use only the keypad with .1 Enter for 0.100 .75 Enter for 0.750 and 50 Enter for 50.000 ... etc.

you don't need javascript for that, you can use a <datalist> :

Code:

<html>
<form onsubmit="return false">

 <input list=choices autofocus> 

 <datalist id=choices>
 <!-- values -->
  <option>0.100</option>
  <option>0.750</option>
  <option>50.000</option>

 <!-- shortcuts -->
  <option value="0.100">.1</option>
  <option value="0.750">.75</option>

</datalist>
</form></html>

look at how complicated the javascript to do that is, and it doesn't even handle accessible input from pasting or IME; that's exactly why HTML5 was sure to add this.

essentially, it allows us to turn any single-line input into M$'s revered "combo" box

you may even want to add the arrow in css using something like
[list]:after {content ▽; margin-left: -1em; }

to designate that it does have a list bound.

**007Julien** · 12-05-2012 03:18 AM

You're absolutely right, only with IE10 ! (*)

Then this format should never be charged to the user but realized when recording.

(*) See Can I use datalist

**negrazo49** · 12-06-2012 12:47 PM

Thank you for your help.
My app is working very well; as a matter of fact I am using the <Datalist> and it works just great.

Thanks again.

**rnd me** · 12-06-2012 02:39 PM

Originally Posted by 007Julien

You're absolutely right, only with IE10 ! (*)

Then this format should never be charged to the user but realized when recording.

you can use DOM commands or probably a jQuery plug-in to add support for datalist to browsers without it.
all you have to do is hide the <datalist> (if not already), iterate the <options>, and feed the .value/.text into the input values of whatever auto-complete script you implemented.

in this way, you get the nice native functionality for 90%+ of visitors, plus it works, though probably not quite as well, for everyone.

**007Julien** · 12-06-2012 04:41 PM

I agree willingly to the applicant's decision, but remains convinced that two lines of script are preferable to multiple lines to enter the list, and all abbreviations besides jQuery !

Code:

<body>
<label for=lsr>Quantity field <input id="txt" type="text" value="0.1 0.15 0.2 0.25 0.5 0.75 1. 1.25 1.5 1.75 2. 3. 10. 15. 50. 100. 1000."></label>
<script type="text/javascript">
document.getElementById('txt').onblur=function(){var i,l,t=this.value.split(/\s+/g);
	for (l=t.length,i=0;i<l;i++) t[i]=(+t[i]).toFixed(3);
	this.value=t.join(' ');
}
document.getElementById('txt').focus();
</script>
</body>

**rnd me** · 12-06-2012 05:03 PM

word to the wise:

(document.getElementById('txt') === txt) === true

also, how is the user to get out of the input using only the keyboard?

if you focus() after the blur(), you make the page inaccessible to anyone who cannot see or use a mouse.

**007Julien** · 12-06-2012 05:40 PM

I do not understand your second line...

Sorry, the for loop has no curly brakets, then the focus is not in the function.
Its only give the focus at the opening of this test. Then is it easy to use the tab key to call the function with the blur.

NB : Thank you for continuing education, even if it takes some time to leave time...

**rnd me** · 12-07-2012 12:14 AM

all i was saying is the code

Code:

document.getElementById('txt')

is the same object as code

Code:

txt

you don't need to use document.getElementById() unless the tag with your ID is recycled by a new element or by re-defining the ID using innerHTML.

examine:

Code:

<html>
  <h1 id=heading > hello </h1>
  <script>
   alert(  heading.innerHTML ); // === hello
 </script>
</html>

it works everywhere, try it.

**007Julien** · 12-07-2012 03:00 AM

Thanks ? It's new ? It was true only with IE long time ago. Where can we find documentation about this?

**rnd me** · 12-07-2012 01:44 PM

you may be asking what? when did this happen?

i found it as a surprise this summer, it was causing a major debug headache for me.

Yes, it WAS IE only, but FireFox4, and Chrome ~12 added it, as did opera at some point.

It works universally because the only old browsers are IE, and this was something that worked in IE.

it's one of the few ideas and features to come of IE that are now everywhere since HTML5 added them to the specification, including:
element.parentElement (vs parentNode)
element.outerHTML
element.innerHTML (old, but of this group)
element.contentEditable (old, but of this group)
element.innerText

there are probably more, i don't know of any list.
these are just the ones that jumped out at me that i can remember from IE6 and missing in FireFox 1.5...

**007Julien** · 12-07-2012 02:42 PM

Thanks. A better thing that all this gadgets which do not simplify the scripts...

Thread: How to avoid typing

Thread Tools

Display

How to avoid typing

A variant to hit the only significant digits following by Enter

How to avoid typing(SOLVED)

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions