it-swarm.com.de

Drücken Sie die Eingabetaste bei einem Eingabetyp = "Text". Wie?

Ich stehe vor einem Problem, das ich mit JQuery Javascript nicht lösen kann. Können Sie mir helfen und mir helfen zu verstehen. Hier ist zunächst mein Code:

        (...)

        <script type="text/javascript">

        // Autocomplete suggestions
        $(function () {
            $("#autoCompInput").autocomplete({
                source: "/Suggestions",
                minLength: 3,
                select: function (event, ui) {
                    if (ui.item) {
                        $("#autoCompInput").val(ui.item.value);
                        $("form").submit();
                    }
                }
            });
        });

        // Provide search results
        $(function () {
            $("#autoCompSearch").click(function () {
                var searchParameters = $("#autoCompInput").val();

                var jsonData = JSON.stringify(searchParameters, null, 2);
                window.location = "/Search?criteria=" + searchParameters;
            });
        });

    </script>

    (...)

    <input class="ui-autocomplete-input" id="autoCompInput" role="textbox" aria-haspopup="true" size="50" autocomplete="off" aria-autocomplete="list" value = "@ViewBag.SearchInfo"/>
            <a id= "autoCompSearch" href = "#" ><img src="@Url.Content("~/Content/Menu/Images/magnifier.png")" alt="Search" /></a>

    (...)

Mit diesem Code kann ich meine Suche nicht mit der Eingabetaste ausführen. Wenn sich der Benutzer in der Eingabe autoCompInput befindet, möchte ich in der Lage sein, zu erkennen, ob er die Eingabetaste drückt und die Übermittlung startet. Ich habe gelesen, dass ich ein Ereignis onkeyup = "onKeyPressed (event)" hinzufügen muss, aber ich verstehe nicht, wie das mit dem Befehl verknüpfte Java Script geschrieben wird. Ich habe es aber erfolglos versucht ... Hast du eine Lösung für mich?

Vielen Dank,

9

Sie sollten das Tastendruckereignis an Ihre Eingabe binden

$("#autoCompInput").bind("keypress", {}, keypressInBox);

function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode                        
        e.preventDefault();

        $("yourFormId").submit();
    }
};
16
workoholic

Mit ähnlichem HTML:

<input type="text" id="myTxt" />
<input type="submit" id="mySubmit" />

Dieses Skript (das das neueste jQuery 1.7.2 verwendet) sollte dies tun:

$('#mySubmit').click(function() {
    alert('Submitted!');
    return false;
});

$('#myTxt').on('keyup', function(e) {
    if (e.keyCode === 13) {
        $('#mySubmit').click();
    }
});

Hier ist ein Arbeitsbeispiel .

7
FishBasketGordo

So weisen Sie in jquery ein Keyup-Ereignis zu

 $("#autoCompInput").keyup(function(event) {
                if (event.keyCode==13) {
                    alert('enter key');
                }
            });
3
Mayhem

Ich denke, es gibt eine bessere und einheitlichere Lösung für diese Art von Problem.

sie können diese Eingaben mit einem GET-Formular versehen. Wenn Sie bei einer Eingabe in diesem Formular die Eingabetaste drücken, wird die Eingabe an die im Aktionsattribut des Formulars angegebene Stelle gesendet. So würde es aussehen (ich habe Ihren Code genommen, entferne aber die für meine Antwort irrelevanten Stellen):

<form id="idForJqueryOnly" action="/Search" method="GET">
  <input type="text" name="criteria" value="someuserinput"/>
  <button type="submit"><img src="...")" alt="Search" /></button>
</form>

Dies ist das Standardverhalten des Browsers. Also, was macht die Form? Bei der Übermittlung erstellt der Browser eine URL wie die folgende: http: // IhrServer wird von der aktuellen URL abgerufen/Search? criterion = someuserinput Was ist passiert, dass der Browser alle Eingaben mit Name und Wert (und nicht deaktiviert) aus dem Formular übernommen und serialisiert hat in URL-Form. Das Submit-Ereignis kann nun durch Drücken der Eingabetaste für einen der Eingänge ausgelöst werden, einschließlich der Schaltflächen, sofern die Schaltflächen nicht das Attribut type = "button" haben.

Wenn Sie vor dem Aufrufen der Suchseite mit Javascript mehr mit den Daten anfangen möchten, können Sie dies mit jquery tun:

$("#idForJqueryOnly").submit(function(){
   // here you can do stuff like serialize the form, or sanitize the input of tue user.
  var data = $("#idForJqueryOnly").serialize();
  $("[name=criteria]").val($("[name=criteria]").val().customSanitizeMethod());

  // if you return false, the form will not submit, say, for validation errors:
  return customValidator.isFormValid("#idForJqueryOnly");
})
0
santiago arizti