HTML5 Editable Textfield PlugIn

  • Hi Coders,

    cause I urgently needed a HTML5 editable Textfield PlugIn I wrote my first Plugin...So far so good, it works and I learned a lot, but I didn`t managed it to get the focus on the editable textfields on touchDevices...

    Even with this:
    window.activekrpanowindow=null
    (from this post: [SOLVED] HTML5 KrPano Viewer interfere in the external forms)
    I did not get the focus on the input fields...

    My solution right now is a transparent layer over the input field, which could capture a click event and focus my inputTextField...
    Not the best way but it works...

    Has someone experience with that? That point makes me really crazy, cause everything works perfect, inc. the right position of the inputFileds with the keyboard on the touchScreen, but how do I get the focus on an editable TextField in HTML5 on touchDevices????? Grrrrr...... *cry* *cry* *cry*

    The problem occurs on ALL touchDevices with HTML5, Flash works like it should...

    Thanks for help,
    steve

    PS: Thanks a lot to Aldo for his treasure of coding-examples with his "open source" PlugIns...THANK YOU ALDO *thumbsup*

  • Hi,

    sorry, but that's difficult to say without an example or any source of course...

    I have now quickly made a super simple html5 plugin which provides a <input> element for text input and there the focus was working fine...

    Here the example:
    https://krpano.com/examples/html5…/textinput.html

    Here for downloading - the whole example as zip, the plugin and the example xml:
    https://krpano.com/examples/html5…t/textinput.zip
    https://krpano.com/examples/html5…ut/textinput.js
    https://krpano.com/examples/html5…t/textinput.xml

    Here the plugin source:

    The plugin itself has a 'text' variable for setting or getting the current text value, and an 'onchanged' event for getting notified when the text has got changed.

    For details about the plugin code itself, please see the plugin interface documentation here:
    https://krpano.com/docu/plugininterface/#js

    Best regards,
    Klaus

  • Hi Klaus,

    thank you very much for your help, but even you`re example does not work so good as expectet...On desktop, everything is fine (so with mine) but on touchdevices you have more than "press" on Screen to get the focus of the textfield...or is that normal? I´m comparing the usability with the inputFields on normal webpages...testet on Android 4.3 with Chrome

    The other problem is that on desktop the tf looses the focus if I click on the screen, with the touchdevices the focus will always be on the tf, even when I click on the pano...means that the keyboard will always be shown, if I look around in the pano...

    Klaus, should I mail you my tf plugin to get a perfect one, and then share it with the community?
    Either it`s not so easy as expectet or I´m totally wrong....

    Best regards,
    Steve

  • Hi,

    you have more than "press" on Screen to get the focus of the textfield...or is that normal?

    What exactly do you mean with 'more than press'?
    I have no Android device with me yet, but on iOS just one touch into the input field is necessary...

    The other problem is that on desktop the tf looses the focus if I click on the screen, with the touchdevices the focus will always be on the tf, even when I click on the pano...means that the keyboard will always be shown, if I look around in the pano...

    Yes, that example is just very basic, the requirement of several tweaks for mobile browsers is not very uncommon. It seems that touching the pano does't automatically change the focus (I don't know why yet), so it might necessary to do that manually.

    I will look into that focus issue and post an updated example (but probably not before next week).

    Best regards,
    Klaus

  • Hi Klaus,

    tested now with different browsers on Android, that "press-Problem" seems to be a problem with chrome and Android...with the bulid in Browser called Android Browser 4.0 I get the focus of the tf by "soft-touch"...same with Firefox

    Quote

    What exactly do you mean with 'more than press'?

    I have no Android device with me yet, but on iOS just one touch into the input field is necessary...

    With "press" I mean you have to touch the tf more than two seconds...but perhaps that`s normal...???

    Quote

    Yes, that example is just very basic, the requirement of several tweaks
    for mobile browsers is not very uncommon. It seems that touching the
    pano does't automatically change the focus (I don't know why yet), so it
    might necessary to do that manually.

    ok, I was wondering if perhaps an internal Function in your player keeps the focus or something like that...

    Thanks for your help,
    Steve

  • I will look into that focus issue and post an updated example (but probably not before next week).

    Hi Klaus

    I am also interested in a solution for this. When the input receives focus, you enter some text, and you close the device keyboard, and start moving the pano around with your fingers, the device keyboard pops up again, because the input never lost its focus.

    Any solutions to this yet?

    Ciao
    Bjorn

  • Also discovered that on my Samsung Galaxy S3, the text input doesn't respond by opening the keyboard when I touch it. This happens for Chrome and the phone's built in browser. Works fine in Firefox on the device.

    This only happens when I add the element like this

    Code
    plugin.sprite.appendChild(inputelement);




    It works fine if I do it the following way, but then I lose the functionality that the plugin interface provides

    Code
    document.getElementsByTagName('body')[0].appendChild(element);
  • Yes, that example is just very basic, the requirement of several tweaks for mobile browsers is not very uncommon. It seems that touching the pano does't automatically change the focus (I don't know why yet), so it might necessary to do that manually.

    I will look into that focus issue and post an updated example (but probably not before next week).

    Klaus, did you manage to look into this problem and why krpano doesn't allow the html5 input to lose focus when touching away from the input?

    Cheers

  • That topic is still on my list, but I don't know yet where there will be time for it.

    Dear Klaus,

    it's been almost a year since the last update in this topic, but I'm facing this problem right now. Did you perhaps have any success in solving this or creating a workaround?

    No text inputs are working on Android with the Chrome browser. I checked Firefox, still works.

    This is a serious issue as this prevents us from developing any serious plugins...

    Anybody else is also welcome to answer, if someone has a solution...thanks!

  • Hello, i have an isue with the input text plugin on mobile, the field not work (i need to stay 5s on it to work on android / iphone , and on winphone this display the context menu)

    Ideas to fix it ?

    Edited once, last by MrTie (October 27, 2016 at 8:36 AM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!