كيفية تشغيل زر HTML عند الضغط على Enter في مربع النص؟



4 Answers

هناك حل خالية من js.

تعيين type=submit إلى الزر الذي تريده أن يكون افتراضيًا type=button إلى أزرار أخرى. الآن في النموذج أدناه ، يمكنك النقر على Enter في أي حقل إدخال ، وسيعمل الزر Render (على الرغم من أنه الزر الثاني في النموذج).

مثال:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

تم اختباره في FF24 و Chrome 35 (يكون formaction عبارة عن ميزة html5 ، ولكن لا يتم type ).

Question

إذن الشفرة التي لدي حتى الآن هي:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

إنه ليس في <form> وهو تماماً كما هو داخل <div> . ولكن عندما اكتب شيئًا في textbox يسمى "addLinks" ، أريد من المستخدم أن يكون قادرًا على الضغط على Enter وتشغيل button "linkadd" الذي سيعمل بعد ذلك على تشغيل وظيفة JavaScript.
كيف يمكنني أن أفعل هذا؟
شكر

تعديل: لم أجد هذا الرمز ، ولكن يبدو أنه لا يعمل.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});



أنا أستخدم زر كندو. هذا العمل بالنسبة لي.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>



استنادًا إلى بعض الإجابات السابقة ، توصلت إلى هذا:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

نلقي نظرة على Fiddle

تعديل: إذا كنت لا ترغب في إضافة عناصر HTML إضافية ، يمكنك القيام بذلك مع JS فقط:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     



  1. استبدل button submit
  2. كن progressive ، تأكد من وجود إصدار جانب الخادم
  3. اربط جافا سكريبت إلى معالج الإرسال الخاص بالنموذج ، وليس بمعالج click الخاص بالزر

يؤدي الضغط على enter في الحقل إلى تشغيل إرسال النموذج ، وسيتم تشغيل معالج الإرسال.




أولا وقبل كل إضافة مسج ملف مكتبة jquery وتسمية ذلك في رأس html الخاص بك.

ثم استخدم رمز jquery based ...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});





Related