Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Freitag, 26. Januar 2018, 15:12

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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tester 17« (26. Januar 2018, 16:31) aus folgendem Grund: Bug in Internet Explorer 11 (9, 10 ?)