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

Friday, January 26th 2018, 3:12pm

Erweiterungsvorschlag textinput.js-Beispiel

Hallo,

ich habe mich sehr über das textinput.js-Beispiel gefreut. *smile*
Da ich selber etwas "gekämpft" habe, möchte ich eine Erweiterung für das textinput.js-Beispiel vorschlagen:

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); // to be defined by user
plugin.registerattribute("ontab", null); // to be defined by user
plugin.registerattribute("focus", text_focus);

inputelement.addEventListener("change", text_changed, false);
inputelement.addEventListener("blur", text_changed, false);
inputelement.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
var pos = get_cursorposition(inputelement);
inputelement.value = inputelement.value.substr(0, pos) + "[br/]" + inputelement.value.substr(pos);
inputelement.selectionStart = pos + 4;
inputelement.selectionEnd = pos + 4;
} else if (event.key === "Escape") {
// ein weiteres Feuern des events onchanged verhindern (muss in KRPANO neu definiert werden) und Texteingabe schliessen
plugin.onchanged = "";
plugin.visible = false;
} else if (event.key === "Tab") {
krpano.call(plugin.ontab, plugin);
};
});
inputelement.addEventListener('touchstart',text_focus, false);
plugin.sprite.appendChild(inputelement);
}

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

function get_cursorposition(el) {
var val = el.value;
return val.slice(0, el.selectionStart).length;
}
function text_set(newtext)
{
inputelement.value = newtext;
}

function text_get()
{
return inputelement.value;
}

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

function text_focus()
{
inputelement.focus();
inputelement.select();
}
};

Das Element wird dabei erweitert um die Events:
blur (Verlassen des Elements)
keydown (Eingabe im Feld)
touchstart (Anclicken auf einem touchfähigen Gerät)

Mit blur kann man (im besten Fall) das Verlassen des Inputfelds abfangen (auch wenn nix geändert wurde).
Leider wird (durch Einbindung durch KRPANO?) auch ein Klick im Feld als blur detektiert.
Daher muss eine Auswertung erfolgen wo sich die Maus befindet, z.B. bei einem zentrierten Texteingabefeld:

<action name="detect_mouseover">
calc(curX, 2*mouse.x - stagewidth);
math.abs(curX);
calc(curY, 2*mouse.y - stageheight);
math.abs(curY);
if((curX GT plugin[inputfield].width) OR (curY GT plugin[inputfield].height),
irgendeineAktion_bei_Verlassen_des_Eingabefeldes();
);
</action>

@Klaus: Gibt es eine bessere Möglichkeit das Verlassen des Feldes (mit oder ohne Änderung) zu detektieren? focusout scheint bei einigen Browsern Probleme zu bereiten, wenn ich diversen Internetbeiträgen glauben schenken kann (?).

Mit keydown kann man, wie im js gezeigt, Eingaben von besonderen Tasten wie Tab, Esc oder Enter speziell behandeln.

touchstart dient der besseren Unterstützung von Tablets etc. (alter Forumseintrag)

Die Routine text_focus dient der automatischen Auswahl des Inhalts des Texteingabefelds. Achtung: zwischen Anzeige und Auswahl des Textfelds muss eine gewisse Zeit verstreichen:

set(plugin[inputfield].visible, true);
wait(0.1);
plugin[inputfield].focus();

Ergänzung:

Um Probleme im Internet Explorer 11 (9 und 10?) zu vermeiden schlage ich folgende Ergänzung für textinput.js vor:
local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
{
...
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '::-ms-clear{display:none;};';
document.getElementsByTagName('head')[0].appendChild(style);

inputelement.addEventListener("click", text_clicked, false);
...
plugin.sprite.appendChild(inputelement);
}

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

Zum einen wird durch den css-style die Anzeige des "ms clear"-Elements verhindert und zum anderen verliert das Eingabefeld durch mehrmaliges Klicken nicht aus Versehen den Fokus.

This post has been edited 1 times, last edit by "Tester 17" (Jan 26th 2018, 4:31pm) with the following reason: Bug in Internet Explorer 11 (9, 10 ?)