locked
Is it possible to modify the code below to moove focus from input box to another without using MAXLENGTH attribute? RRS feed

  • Question

  • User1216627406 posted

    Greetings experts,


    The code below allows users to move focus from one input text box to another dynamically without knowing the form field IDs.


    For this to work though, maxlength attribute must be given a value.


    Problem with this is that it is not reliable because users may not enter entire maxlength.


    Is there a way to modify the code below to move focus from one input box to another without knowing the field IDs and without maxlength attribute?

    Thanks a lot in advance

    <script type="text/javascript">
    function doNext(el)
    {
    if (el.value.length < el.getAttribute('maxlength')) return;
    var f = el.form;
    var els = f.elements;
    var x, nextEl;
    for (var i=0, len=els.length; i<len; i++){
    x = els[i];
    if (el == x && (nextEl = els[i+1])){
    if (nextEl.focus) nextEl.focus();
    }
    }
    }
    </script>
    
    <form action="">
    <table>
    <tr>
    <td>
    <input type="text" maxlength="5" value="sammy"
    onkeyup="doNext(this);">
    </td>
    <td>
    <input type="text">
    </td>
    </tr>
    </table>

    Wednesday, October 23, 2019 2:26 AM

All replies

  • User-719153870 posted

    Hi simflex,

    Problem with this is that it is not reliable because users may not enter entire maxlength.

    In your code, if customer typed more than 5 characters into the first textbox, it will lose the focus and the next textbox will be focused.

    It's little hard to understand "users may not enter entire maxlength.", do you mean that you want to trigger this "jump focus" event even the text length typed by customer is shorter than 5?

    Is there a way to modify the code below to move focus from one input box to another without knowing the field IDs and without maxlength attribute?

    This can't be done unless you tell the condition when you want to trigger the "jump focus" event, in your current code, the conditon is "when the text lenght is longer than 5", what the new condition will you want in your new code?

    Best Regard,

    Yang Shen

    Wednesday, October 23, 2019 6:12 AM
  • User1216627406 posted

    Hi Yang,

    You asked:

    It's little hard to understand "users may not enter entire maxlength.", do you mean that you want to trigger this "jump focus" event even the text length typed by customer is shorter than 5?

    Yes, that's what I meant.

    As it stands right now, assuming that maxlength is 30 (maxlength="30"), if user types say only 20, then the focus will not jump to the next box.

    We would like to have the focus jump to next input box whether or not the maxlength is reached.

    Is this possible?

    Wednesday, October 23, 2019 1:41 PM
  • User475983607 posted

    Is this possible?

    You need a trigger.  If the length is not a trigger than what is the trigger?  Tab key? Enter key? Maybe a timer?

    Wednesday, October 23, 2019 2:09 PM
  • User1216627406 posted

    mgebhard,

    The reason we are having this problem is that the website (intranet site unfortunately), is responsive making it easier for users to fill out the form on their cellphones while not using their PCs.

    So, as far as I know, no tab key for the various mobile phones which is why the tab key is not an option.

    I guess they could use the enter key but management makes things so difficult by insisting that we give the users what they ask for, for better user experience I guess.

    Wednesday, October 23, 2019 2:29 PM
  • User475983607 posted

    You have not answered the question.   What is the trigger that moves focus from one input to another?  Scrolling the screen?  Timer?  Touching outside the input?

    simflex

    I guess they could use the enter key but management makes things so difficult by insisting that we give the users what they ask for, for better user experience I guess.

    Ask the management or the product owner for clarification if you are not sure how the UI is supposed to work.  Products owners (or end users) are responsible for providing requirements otherwise developers cannot test new features and verify the features work as expected.

    Wednesday, October 23, 2019 2:47 PM
  • User1216627406 posted

    Well, I am not really sure I understand the question.

    The code I posted uses maxlength as trigger. If character entered reaches the maxlength value, the focus moves to the next  input box.

    That's how the code I posted works right now.

    My question is whether it can be modified to work without maxlength as trigger.

    Ask the management or the product owner for clarification if you are not sure how the UI is supposed to work.

    I explained what management wanted. They do not want the user to have to use the tab key. They would prefer, if possible, for focus to jump to next input box once the user has finished entering value to the current input box.

    Since I have provided the solution that I know which I posted above, rather than tell them that it is not possible without maxlength since we know that users don't always use up maxlength value, I thought it is safer to ask those (you guys) who know better than I do whether there is a solution that meets their requirements.

    I hope I am the right track of answering your question.

    Wednesday, October 23, 2019 3:03 PM
  • User753101303 posted

    Hi,

    What if you add a name attribute on both form fields ? It never striked me and I see that on my phone the "Enter" key is replaced by a "Next" key when having multiple form fields.

    Obvisouly you won't be able to programmatically guess when the user finished to enter a field if you don't exact a particular length. I would search if I can help those phones to see a tab key is needed or would suggest alternate kayboard (it would solve the issue for all web sites rather than just for this one).

    Edit: asked adding a name as it is needed for a form field to be posted back to the web server. It might be hint that the tab key is needed. The next option would be to add an explicit tabindex value bit it seems to work just fine here without that.

    Edit 2: if they insist ask them how they think one could guess when "the user has finished entering value to the current input box"

    Wednesday, October 23, 2019 3:10 PM
  • User1216627406 posted

    Edit 2: if they insist ask them how they think one could guess when "the user has finished entering value to the current input box"

    Great point. We have floated this question but I didn't do it with much confidence because a lot of times when I post a question here, I am doing so to confirm my assumption.

    This way, I can speak authoritatively on the issue knowing that experts of the subject like you have given me an invaluable feedback about it.

    Wednesday, October 23, 2019 4:31 PM
  • User475983607 posted

    Great point. We have floated this question but I didn't do it with much confidence because a lot of times when I post a question here, I am doing so to confirm my assumption.

    This way, I can speak authoritatively on the issue knowing that experts of the subject like you have given me an invaluable feedback about it.

    This is a requirements gathering question.  "Let's imagine this feature is complete.  What steps will you preform to verify this feature is working as you expect?"

    Wednesday, October 23, 2019 6:06 PM
  • User1216627406 posted

    First, load the web app on a browser; start with IE even though it is going away.

    Focus should immediately be on the first input box.

    This is not part the question here because it is easy to add that.

    I enter value into the textbox

    I don't if you are trying to show that this is not possible (LOL) but the question is how to I let the app know that I am done with entering value into any particular input box.

    This is an issue.

    Then what happens when not all the input boxes are not mandatory?

    No easy solution here.

    Thursday, October 24, 2019 12:32 AM
  • User-719153870 posted

    Hi simflex,

    simflex

    Then what happens when not all the input boxes are not mandatory?

    As you said, if not all the input boxes are mandatory, this "jump focus" event will make the user experience even worse.

    According to my experience, we customers always have the right to choose when our input is done and if we want to skip those input which are unnecessary.

    However, this "jump focus" event seems will cause some little troubles when your customers doing their input.

    simflex

    how to I let the app know that I am done with entering value into any particular input box.

    If your management or your customers insist in this event, this trigger really need to be considered carefully.

    Best Regard,

    Yang Shen

    Thursday, October 24, 2019 1:26 AM
  • User475983607 posted

    simflex

    First, load the web app on a browser; start with IE even though it is going away.

    Focus should immediately be on the first input box.

    This is not part the question here because it is easy to add that.

    I enter value into the textbox

    I don't if you are trying to show that this is not possible (LOL) but the question is how to I let the app know that I am done with entering value into any particular input box.

    This is an issue.

    Then what happens when not all the input boxes are not mandatory?

    No easy solution here.

    Your are missing the point.  I already know you can't answer this question.   You need to ask management or the product owners.

    I've built a lot of projects and this situation is common.  The product owners think the computer can figure out the user's intention.  We know as developers that's not possible.  When you run across this situation you need to ask the user's clarifying questions like above.  It forces them to think about the vague requirement rather than passing the vague  requirement to you which you just passed to the community.

    Thursday, October 24, 2019 10:29 AM
  • User1216627406 posted

    Like I said previously, I have looked at various scenarios where this could be possible and didn't see any.

    It is always a good idea to ask for a second opinion which is what I did.

    All this stuff of trying to get them to explain how it would work has already been done.

    If it is not possible, then it is not possible.

    I have had developers come to me and ask me for a second opinion intended to underscore their position that some requirements given to them is not possible.

    What I did here is no different.

    Thursday, October 24, 2019 1:56 PM
  • User1216627406 posted

    Thanks Yang,

    I am confident now reaffirming my original position that this is not possible.

    Thursday, October 24, 2019 2:11 PM
  • User753101303 posted

    "how to I let the app know that I am done with entering value into any particular input box"

    Unless special cases such as requiring exactly x characters, an app won't be able to guess by code that the user want to focus the next field (let's say the user is entering a street address).

    Instead when I have multiple input text field, on my phone I have a "Next" button, so I enter some text, use "Next" and then I can enter text in the next field.

    On the last text fields, this key turns back to "OK" which allows to submit the form liekly using the default submit button.

    Do a test but my first move would be to create a simple test page to see what happens for various phone/keyboard. My first move would be to not deal with that from my app but to suggest a more capable keyboard software to users not having any support for a tab key.

    It would be generally usefull on all web sites rather than just on mine.

    Thursday, October 24, 2019 2:25 PM
  • User1216627406 posted

    Thanks,

    We have decided to settle on using TAB key to move from box to box.

    Nothing they can do about it.

    Thanks all for your inputs and feedbacks.

    Thursday, October 24, 2019 2:53 PM