Search code examples
javascripthtmlipadslidermobile-safari

Virtual Keyboard on Ipad make the input[type=range] slider thumb disappear

I am currently developing a web site for an iPad Air and Firefox, with bootstrap.

In a page, I have an input type=number that allows the user to change the value of the input type=range. I have set the onkeypress event of my input type=number to force the blur() when the ENTER key is pressed.

function onkeyPressFunction(){

    var isEnter = charCode == 13;

    if (isEnter)
       {
           document.activeElement.blur();
       }

}

The problem is that on Ipad, when I press the go button on the virtual keyboard, the thumb of the slider disappears.

I have tested it on Firefox and I do not have this problem.

Solution

  • I found that the problem was a render problem. When I zoom in and then zoom out, the thumb of the slider reappear.