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.

    Edited once, last by Tester 17: Bug in Internet Explorer 11 (9, 10 ?) (January 26, 2018 at 4:31 PM).

Participate now!

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