webentwicklung-frage-antwort-db.com.de

konzentrieren Sie sich auf den nächsten tabindex des HTML-Elements onEnter keypress by JQuery

Hallo Freunde, Ich arbeite an einer kleinen Aufgabe, die es dem Benutzer ermöglicht, das html-Element bei Eingabe der Tastenkombination tabindexiert zu haben.

Als neu bei Jquery habe ich Code geschrieben, der mir scheint, dass er funktionieren wird, aber es gibt einige Probleme.

Erste Ergebnisse
Der Tätercode funktioniert nicht, da die Ausgabe im Nachrichtenblatt "Undefined" ist.

$('*').attr('tabindex').id

enter image description here

Der Code ist unten angegeben und ich habe sogar ein JSFiddle erstellt.

JQuery

 $(document).ready(function (eOuter) {
    $('input').bind('keypress', function (eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            //after increment of tabindex ,make the next element focus
            $('*').attr('tabindex', tabindex).focus();

                       **//Msg Label**
            //Just to print some msgs to see everything is working
            $('#Msg').text( this.id + " tabindex: " + tabindex 
               + " next element: " + $('*').attr('tabindex').id);

            return false; // to cancel out Onenter page postback in asp.net
        }
    });
}
);

HTML

<div>
    Employee Info<br />
    Name<br />
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
    <br />
    Age<br />
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
    <br />
    Gender<br />
    <select name="DdlGender" id="DdlGender" tabindex="3">
      <option selected="selected" value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <br />
    <div>
        Previous Employment<br />
        <select name="DdlCompany" id="DdlCompany" tabindex="4">
   <option selected="selected" value="0">Folio3</option>
   <option value="1">Null Soft</option>
   <option value="2">Object Soft</option>
   <option value="3">Excepption Soft</option>
    </select>
        &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
        <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
        <br />
        Address<br />
        <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
        <br />
       <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
        <br />
        <label id="Msg">Message here</label>
    </div>
</div>

Lass mich wissen, wo ich falsch liege:/

12
Owais Qureshi

Ich habe ein paar kleinere Probleme mit jQuery gefunden. Hier behoben: JSFiddle .

Diese Linie:

$('*').attr('tabindex', tabindex).focus();

kann so geschrieben werden:

$('[tabindex=' + tabindex + ']').focus();

und das:

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

ruft das id-Attribut nicht auf die jQuery-Art auf (Sie verwenden JavaScript-Syntax, aber das Ergebnis von $ (this) ist ein jQuery-Objekt. So wird $(this).id zu $(this).attr('id')

Das Formular hat immer noch ein Einreichungsproblem, bei dem ich nicht zu weit gegangen bin, aber es ändert den Fokus und füllt jetzt das '#Msg'-Element aus.

13
vansimke

Hier ist mein vollständiger Arbeitscode für focusNextElement on keydown [Enter] ohne _ ​​jQuery mit JSFiddle-Beispiel basierend auf folgendem stackoverflow Antworten:

  1. Wie kann man verhindern, dass die EINGABETASTE ein Webformular sendet?
  2. Nächstes Element im Registerindex fokussieren
<script type="text/javascript">

    function focusNextElement() {
      var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
      if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
          function(element) {
            return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
          });
        var index = focussable.indexOf(document.activeElement);
        focussable[index + 1].focus();
      }
    }

    window.addEventListener('keydown', function(e) {
      if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
          e.preventDefault();
          focusNextElement();
          return false;
        }
      }
    }, true);

</script>
6
eapo

Wollte keinen neuen Beitrag schreiben und SPAM mit der Lösung machen, die ich für nützlich hielt.

Sammelte Informationen aus anderen Quellen ( Brian Glaz-Code Nice-one) und erstellte die Cross-Browser-Version von Focus Next Element im Tab-Index mit der Taste Enter.

Tab-Indizes sind nicht hintereinander, können aber auch ein Leerzeichen zwischen (1,2,9,11,30 usw.)

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it's readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });

    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

Ich hoffe, dass es für jemanden nützlich ist . Sie können es gerne bearbeiten/kommentieren.

4
karlisup
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
2
Ana El Bembo

Auf der Suche nach einer Lösung für genau dieses Problem habe ich eine kleine Jquery-Funktion generiert, um den nächsten gültigen Tabindex zu finden. Angenommen, die Wartung ist etwas einfacher und möglicherweise etwas schneller als eine while-Schleife:

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

Hoffe, dass dies hilfreich ist, wer es braucht. das ist getestet und funktioniert.

Kurz gesagt: Suchen Sie nach dem Element des aktuellen tabindex, suchen Sie dieses Element in der Liste aller tabindex-Elemente, rufen Sie den Index ab und erhöhen Sie den Index.

Dann können Sie mit dieser Funktion das nächste tabindex-Element auf diese Weise auswählen:

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

Ich habe den Anruf nicht getestet, nehme aber an, dass er funktioniert.

1
Jörg Henke
var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

beispiel für bearbeitbare Zellen in der Tabelle

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

Bearbeitbare Zellen in dynamischer Tabelle

0