www.webdeveloper.com
Results 1 to 15 of 15

Thread: How to avoid typing

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    5

    How to avoid typing

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    use the <datalist> html tag and the list html attribute to provide suggestions to regular <input>s.

  3. #3
    Join Date
    Nov 2012
    Posts
    5
    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.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264

    A variant to hit the only significant digits following by Enter

    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
    Last edited by 007Julien; 12-04-2012 at 06:47 PM.

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by 007Julien View Post
    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.
    Attached Images Attached Images
    Last edited by rnd me; 12-05-2012 at 03:01 AM.

  6. #6
    Join Date
    Nov 2012
    Posts
    5

    How to avoid typing(SOLVED)

    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.

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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
    Last edited by 007Julien; 12-05-2012 at 03:54 AM.

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by 007Julien View Post
    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.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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>

  10. #10
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.
    Last edited by rnd me; 12-06-2012 at 05:05 PM.

  11. #11
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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...
    Last edited by 007Julien; 12-06-2012 at 05:44 PM.

  12. #12
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.
    Last edited by rnd me; 12-07-2012 at 12:17 AM.

  13. #13
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Thanks ? It's new ? It was true only with IE long time ago. Where can we find documentation about this?

  14. #14
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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...

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Thanks. A better thing that all this gadgets which do not simplify the scripts...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles