How to avoid typing

This site is best viewed in a modern browser with JavaScript enabled.

negrazo49

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

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

negrazo49

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

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

<!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)
	[COLOR="#0000FF"]// Authorized keys : Enter, space, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, and .[/COLOR]  

	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;
	[COLOR="#0000FF"]// Remove non authorized entries [/COLOR]
	if (!keys[k]) {str.value=str.value.replace(/[^\d\.\s]+/g,'');return;}
	[COLOR="#0000FF"]// Enter : Format the last Entry [/COLOR]
	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

007Julien;1238171 wrote:
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> :

<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

to designate that it does have a list bound.

The attachments of this post were removed during the platform migration in 2018

007Julien

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

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

007Julien;1238215 wrote:
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

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 !

<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

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

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

all i was saying is the code

document.getElementById('txt')

is the same object as 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:

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

it works everywhere, try it.

007Julien

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

rnd_me

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

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