Input Table: Disable arrow key behaviour on a numeric inputs

  • Profile Image
    marianido
    Asked on June 25, 2017 at 04:19 PM

    Hi,

    How can I do to disable arrows behaviors (increments or decrements) in numerics fields inputs??

    Thanks in advance!

    Dante

  • Profile Image
    Mike
    Answered on June 25, 2017 at 05:38 PM

    If you need this for Number fields within Configurable List, please add the next CSS to the widget.

    .stepper-btn-wrap {
    display: none;
    }

    If you are referring to some other field type, please provide us with more information.

  • Profile Image
    marianido
    Answered on June 25, 2017 at 06:43 PM
    Hi Mike,
    I’m talking about Input Table Form Element, when I’ve defined the field type as numeric text box. It not display the arrows in the field but if you press them, the spinner behavior come on.
    It is not a display issue, it’s a behavior issue.
    Thanks!
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: domingo, 25 de junio de 2017 18:38
    Para: Dante Mariani
    Asunto: Re: Disable arrows on numbers inputs.
    A new response has been received:
    [JOTFORM]
    Answered by Mike
    If you need this for Number fields within Configurable List, please add the next CSS to the widget.
    .stepper-btn-wrap {
    display: none;
    }
    [https://shots.jotform.com/mike/s/btl11.png]
    If you are referring to some other field type, please provide us with more information.
    View this thread on browser » Unsubscribe Thread
    1498426679
    ...
  • Profile Image
    Chriistian
    Answered on June 25, 2017 at 08:45 PM

    @marianido,

    I tried to add an Input Table form element on my test form, but I can't able to see the spinner you have mentioned when I press every number field inside of it when testing it on live preview.

    Are you referring to the (Add rows) in the builder preview? Please see the screencast below:

     

    If this is what you are referring to, unfortunately, it is not possible to remove because that's the input table intended to work inside the builder. It helps the users to add more rows easily.

    However, if you mean something else, please provide us more details and do get back to us.
    Regards.

  • Profile Image
    marianido
    Answered on June 25, 2017 at 09:43 PM
    Hi Chriistian,
    1. In your test form, Have you defined the field as a numeric text box field?, if not, please do it.
    2. After that put your cursor, in the field and press arrow up or arrow down, many times.
    3. What do you see?
    4. I need that regardless of whether the key (up or down) is pressed, the entered value does not change.
    5. I wrote in my previous email, that the problem was not visual but behavioral, similar to the effect produced by the spinner control.
    6. I hope I have explained well this time.
    Thanks!
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: domingo, 25 de junio de 2017 21:46
    Para: Dante Mariani
    Asunto: Re: Configurable List: Disable arrows on numbers inputs
    A new response has been received:
    [JOTFORM]
    Answered by Chriistian
    @marianido,
    I tried to add an Input Table form element on my test form, but I can't able to see the spinner you have mentioned when I press every number field inside of it when testing it on live preview.
    [https://www.jotform.com/uploads/forum/Chriistian/1498437415JotForm-25.gif]
    Are you referring to the (Add rows) in the builder preview? Please see the screencast below:
    [https://www.jotform.com/uploads/forum/Chriistian/1498437700JotForm-25.gif]
    If this is what you are referring to, unfortunately, it is not possible to remove because that's the input table intended to work inside the builder. It helps the users to add more rows easily.
    However, if you mean something else, please provide us more details and do get back to us.
    Regards.
    View this thread on browser » Unsubscribe Thread
    1498437931
    ...
  • Profile Image
    Chriistian
    Answered on June 25, 2017 at 11:40 PM

    Thanks for providing more info.

    Yes on my test form, I have defined the field as a numeric text box field first. Please note that the numeric text box field in an Input table or even a regular numeric text box behave like this. It is not possible to disable this behavior on a numeric textbox field on an Input table.

    Alternatively, if you don't want the values to change when pressing the arrow key on the keyboard (up or down), you may use select a Textbox field on the input table instead. But this will allow letters as values. 

    Or if you want, you can use a regular Short Entry text field and then position the fields to align them like in the input table. Here's the guide on Form Field Positioning. Then, choose numeric as their field validation.

    Hope this helps.

    Let us know if you need further assistance.
    Regards.

  • Profile Image
    marianido
    Answered on June 26, 2017 at 06:43 AM
    Hi Criistian,
    Thanks for your answer, but none of those workarounds help with my issue.
    Thanks again!
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: lunes, 26 de junio de 2017 00:40
    Para: Dante Mariani
    Asunto: Re: Configurable List: Disable arrows on numbers inputs
    A new response has been received:
    [JOTFORM]
    Answered by Chriistian
    Thanks for providing more info.
    Yes on my test form, I have defined the field as a numeric text box field first. Please note that the numeric text box field in an Input table or even a regular numeric text box behave like this. It is not possible to disable this behavior on a numeric textbox field on an Input table.
    Alternatively, if you don't want the values to change when pressing the arrow key on the keyboard (up or down), you may use select a Textbox field on the input table instead. But this will allow letters as values.
    [https://www.jotform.com/uploads/forum/Chriistian/14984479832017-06-26_1126.png]
    Or if you want, you can use a regular Short Entry text field and then position the fields to align them like in the input table. Here's the guide on Form Field Positioning. Then, choose numeric as their field validation.
    [https://www.jotform.com/uploads/forum/Chriistian/14984483382017-06-26_1138.png]
    Hope this helps.
    Let us know if you need further assistance.
    Regards.
    View this thread on browser » Unsubscribe Thread
    1498448415
    ...
  • Profile Image
    jonathan
    Answered on June 26, 2017 at 09:13 AM

    Can you please confirm that this is your form that have the issue.

    If it is, I also could not reproduce the issue on the Matrix table field on the form. When I use the Textbox with Numeric data type, there is no spinner like arrow on them.

    Can you also take a screenshot of the issue so that we can at least visually see what you were trying to describe.

    We will wait for your updated response.

     

  • Profile Image
    marianido
    Answered on June 26, 2017 at 12:43 PM
    Hi Jonathan,
    Yes, this is the form.
    Forget the word “spinner”, I was talking about its behavior, not about that the spinner arrows appear in the box.
    Please, as I wrote before in other email. I just only need that when my user enter data in the numeric field, if she press up or down key, the numeric value don’t change. Just it.
    I know how to do it with javascript trapping the key events, but I think that it is not possible with css.
    Waiting for your answer
    Thanks
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: lunes, 26 de junio de 2017 10:14
    Para: Dante Mariani
    Asunto: Re: Input Table: Disable arrow key behaviour on a numeric inputs
    A new response has been received:
    [JOTFORM]
    Answered by jonathan
    Can you please confirm that this is your form that have the issue.
    If it is, I also could not reproduce the issue on the Matrix table field on the form. When I use the Textbox with Numeric data type, there is no spinner like arrow on them.
    [https://www.jotform.com/uploads/forum/jonathan/1498482803zzz%202017-06-26%2021.12.37.png]
    Can you also take a screenshot of the issue so that we can at least visually see what you were trying to describe.
    We will wait for your updated response.
    View this thread on browser » Unsubscribe Thread
    1498482814
    ...
  • Profile Image
    david
    Answered on June 26, 2017 at 01:48 PM

    I do not believe it is possible to disable to up/down arrows when using the spinner field by using CSS.  It would likely need to be done by disabling the keyboard events using javascript. 

  • Profile Image
    marianido
    Answered on June 26, 2017 at 03:43 PM
    Yes, that is my point, but in this case I’m using a numeric text box, not an spinner field. So my question was if it is possible to disable up & down arrows it in this case.
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: lunes, 26 de junio de 2017 14:48
    Para: Dante Mariani
    Asunto: Re: Input Table: Disable arrow key behaviour on a numeric inputs
    A new response has been received:
    [JOTFORM]
    Answered by david
    I do not believe it is possible to disable to up/down arrows when using the spinner field by using CSS. It would likely need to be done by disabling the keyboard events using javascript.
    View this thread on browser » Unsubscribe Thread
    1498499284
    ...
  • Profile Image
    david
    Answered on June 26, 2017 at 05:22 PM

    I believe the same applies to the input table.  If you switch to "Text Box" or "Currency Box" as the input type instead of "Number Text Box", it will no longer accept up/down key inputs.

  • Profile Image
    marianido
    Answered on June 26, 2017 at 06:43 PM
    OK,
    Thanks for your help!
    Dante
    De: JotForm [mailto:noreply@jotform.com]
    Enviado el: lunes, 26 de junio de 2017 18:23
    Para: Dante Mariani
    Asunto: Re: Input Table: Disable arrow key behaviour on a numeric inputs
    A new response has been received:
    [JOTFORM]
    Answered by david
    I believe the same applies to the input table. If you switch to "Text Box" or "Currency Box" as the input type instead of "Number Text Box", it will no longer accept up/down key inputs.
    View this thread on browser » Unsubscribe Thread
    1498512172
    ...