You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Monday, March 10th 2014, 5:38pm

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*

2

Monday, March 10th 2014, 7:10pm

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:
http://krpano.com/examples/html5plugin-t…/textinput.html

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

Here the plugin source:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var krpanoplugin = function()
{
    var local = this;

    var krpano = null;
    var plugin = null;

    var inputelement = null;

    local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
    {
        krpano = krpanointerface;
        plugin = pluginobject;

        inputelement = document.createElement("input");
        inputelement.type = "text";
        inputelement.style.width  = "100%";
        inputelement.style.height = "100%";

        plugin.registerattribute("text", "", text_set, text_get);
        plugin.registerattribute("onchanged", null);

        inputelement.addEventListener("change", text_changed, true);

        plugin.sprite.appendChild(inputelement);
    }

    local.unloadplugin = function()
    {
        plugin = null;
        krpano = null;
    }

    function text_set(newtext)
    {
        inputelement.value = newtext;
    }

    function text_get()
    {
        return inputelement.value;
    }

    function text_changed()
    {
        krpano.call(plugin.onchanged, plugin);
    }
};


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:
http://krpano.com/docu/plugininterface/#js

Best regards,
Klaus

3

Tuesday, March 18th 2014, 11:20am

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

4

Tuesday, March 18th 2014, 2:27pm

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

5

Tuesday, March 18th 2014, 4:08pm

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

Quoted

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...???

Quoted

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

6

Monday, May 26th 2014, 4:02pm

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

7

Tuesday, May 27th 2014, 8:17am

This is so cool, Klaus *g* Could you please provide this plugin for flash and html5? Right now I´m also using less-than-ideal solutions and I would love to have a proper editable textfield coming with krpano *squint*

BR
Nupsi

8

Tuesday, May 27th 2014, 11:00am

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

Source code

1
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

Source code

1
document.getElementsByTagName('body')[0].appendChild(element);

9

Monday, September 1st 2014, 12:28pm

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

10

Monday, September 1st 2014, 12:31pm

No sorry.

11

Monday, September 1st 2014, 12:32pm

Any idea when you might be able to have a look Klaus?

12

Monday, September 1st 2014, 12:33pm

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

13

Monday, September 1st 2014, 12:34pm

Ok, thanks Klaus

14

Monday, August 24th 2015, 8:50pm

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!

15

Wednesday, August 26th 2015, 12:54pm

No solution, sorry. But I also still looking forward to the final release of this plugin *squint*

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

16

Wednesday, August 26th 2015, 4:59pm

Use normal html forms and javascript.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

17

Wednesday, August 26th 2015, 11:11pm

Use normal html forms and javascript.
I am, that's how I encountered the problem.

18

Wednesday, October 26th 2016, 2:00pm

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 ?

This post has been edited 1 times, last edit by "MrTie" (Oct 27th 2016, 8:36am)


19

Thursday, October 27th 2016, 11:10am

Found solution :


inputelement.addEventListener('touchstart',text_click, false);


function text_click()
{
inputelement.focus();
}

This post has been edited 1 times, last edit by "MrTie" (Nov 8th 2016, 2:14pm)


20

Sunday, April 8th 2018, 1:28pm

Hello!

At me textinput.js does not work in krpano 1.19-pr15 (build 2018-03-28).


ERROR: parsing 'textinput.js' failed:SyntaxError: Unexpected token ;



How can I correct the error, tell me please



*sad* *confused* *question*

Similar threads