#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    10
    Rep Power
    0

    Javascript and Input Fields


    For starters, the screen capture I am going to reference is at http://pcsspanish.com/image.jpg. Thanks.

    Sorry, but being a teacher I had to block the names of my students on the screen capture pic. Okay, so, I've got this javascript which puts the desired grade in the field. I use this for quick placement so the teacher doesn't HAVE to type in the grade for each one. This is optimized for the ipad, so I'm trying to give the teacher the ability to avoid typing.

    So here's how it works. You tap the '100' button and a 100 appears in the field for that student, and so on. I have two problems, and both of them are major as far as I'm concerned:

    Problem 1: When I tap a grade button, the grade appears in the field, however, the cursor 'focuses' on that field also, which pulls up the keyboard. I absolutely cannot have that! After putting in the grade, I need the field to lose focus.

    Problem 2: As you may be able to tell. I assigned the grade 100 for the first student, a 90 for the second, an 80, then a 70, a 60, a 50 and a 0. But look at the 3rd student and the 6th student. For the third student, I first assigned an 80, and then I went back and re-assigned it as a 50. As you can see, the 50 split the numbers '8' and '0' to make '8500'. For the 6th student I assigned a 50. I then went back and tapped a 90. Once again the 90 split the '5' and the 0' to make '5900'. What I need is for the javascript to clear any current contents of the field before putting in the new value.

    I have to solve both of these or else the concept is no good for me. Please help.

    - James

    Javascript Function:
    Code:
    <script type="text/javascript">
    
    function insertAtCursor(fieldID, insertValue)
    {
      var fieldObj = document.getElementById(fieldID);
    
      if (document.selection)
      { //IE support
        fieldObj.focus();
        document.selection.createRange().text = insertValue;
      }
      else if (fieldObj.selectionStart || fieldObj.selectionStart=='0')
      { //MOZILLA/NETSCAPE support
        endPos = fieldObj.selectionStart+1;
        fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue
                       + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length);
        fieldObj.selectionStart = endPos
        fieldObj.selectionEnd = endPos
        fieldObj.focus();
      }
      else
      {
        fieldObj.value += insertValue;
      }
    }
    
    </script>
    Button Code: (please forgive this is done in PHP so that I can increment the field id variable). The code works. I just need my two problems solved. THANK YOU.
    Code:
    	print "<img src=\"resources/assign_100.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '100');\">\n";
    	print "<img src=\"resources/assign_90.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '90');\">\n";
    	print "<img src=\"resources/assign_80.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '80');\">\n";
    	print "<img src=\"resources/assign_70.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '70');\">\n";
    	print "<img src=\"resources/assign_60.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '60');\">\n";
    	print "<img src=\"resources/assign_50.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '50');\">\n";
    	print "<img src=\"resources/assign_0.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '0');\">\n\n";
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    How about simplifing the 'insertAtCursor' function to something like:
    Code:
    function insertAtCursor(fieldID, insertValue) {
        var fieldObj = document.getElementById(fieldID);
    
        fieldObj.value = insertValue;
    }
    and disabling the text input field to stop the iPad keyboard from popping up?

    Example here: http://jsfiddle.net/yzH7y/

    Or setting the input field to read only would stop the iPad keyboard from displaying and the text input wouldn't be greyed out.

    Check it out here: http://jsfiddle.net/yzH7y/1/
    Last edited by Edge360; June 27th, 2013 at 08:36 AM.

IMN logo majestic logo threadwatch logo seochat tools logo