HTML5 Editable Textfield PlugIn

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:

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

Best regards,
Klaus

Hi,

Quote from svb

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

Quote from svb

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

Quote from klaus.krpano

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

This is so cool, Klaus 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

BR
Nupsi

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

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

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

Quote from klaus.krpano

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

No sorry.

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

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

Ok, thanks Klaus

Quote from klaus.krpano

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!

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

Use normal html forms and javascript.

Quote from sachagriffin

Use normal html forms and javascript.

I am, that's how I encountered the problem.

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 ?

Found solution :

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


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

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