javascript - التركيز على التغريد حقل المدخلات مشروط




jquery ruby-on-rails (6)

لدي النموذج المشروط التالي من المثال:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Enter something: <input type="text" id="myInput">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

أريد أن يكون حقل الإدخال الخاص بي مركَّزًا بعد ظهور التنسيق.
لقد قمت بمحاولة كل من ضبط تلقائي للصورة ووضع التركيز الميداني على $('modal').shown() الحدث. إنه يركز على الحقل (لدي حدث آخر يعرض الملصق عند تركيز الحقل) ولكن في الواقع لا يتم التركيز على الحقل ولا بد لي من الضغط على TAB للتركيز عليه مرة أخرى. جربت أيضًا شيئًا كهذا:

$(".modal").on('shown', function() {
    $(this).find("[autofocus]:first").focus();
});

وتحديد autofocus:"autofocus" سمة autofocus:"autofocus" . أعطى نفس التأثير.
كل ما حاولت فعله يعمل عندما يكون modal مجرد div معتاد ، فإنه يتم التركيز على تحميل الصفحة. ولكن عندما يتم تشغيل الوسائط عن طريق زر - لا شيء يعمل (متأكد من أنني أغير المنطق أيضًا ، عندما يكون modal مجرد div معتاد ، يمكنني التركيز عليه عند التحميل ، عندما أقوم بتشغيله عن طريق الزر ، أضعه في الاعتبار وأحاول حله وفقًا لذلك).

ما أريده هو أن يكون التركيز على الحقل بعد تحميل الوسائط ، بحيث يحتوي على مؤشر وامض ويمكن للمستخدم البدء في الكتابة.

الشيء الوحيد الذي يعمل هو تغيير bootstrap.js نفسها ، لقد وضعت $("#myInput").focus() مكان ما داخل القسم modal bootstrap.js لكنني نسيت أين كان ، والثانية - أعتقد أنه ليس من الجيد أن تغيير bootstrap.js API ، يجب أن يكون هناك حل أسهل وأكثر أناقة. نصيحة لي من فضلك ، شكرا الانجاز

تحديث:
أولا وقبل كل شيء ، شكرا لمساعدتكم! شكراً لك ، اكتشفت أن المشكلة التي واجهتها هي مشكلة القضبان.

هذا ما فعلته:
1). rails generate controller home index
2). التطبيق / وجهات النظر / الوطن / index.html والتطبيق / الأصول / جافا سكريبت / something.js مثل في هذا jsFiddle التي تقدمها robertklep : http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js و bootstrap.js في التطبيق / الأصول / javascript / (كلاهما حديثان من موقع الويب ، لم يتغير شيء)
5). app / views / layouts / application.html.erb - أعتقد أن هذا الملف هو مفتاح الحل:

<!DOCTYPE html>
<html>
<head>
  <title>Udc</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

لا يزال لا يعمل. يتم تضمين جميع ملفات js ، ولكن عندما أفتح مشرفي في المستعرض - يتم التركيز على الإدخال للحظة ويصبح غير مركّز مرة أخرى.

لقد حاولت أيضا هذا:

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

لا يزال الاشياء نفسها.
اقتراحات؟ :)

تحديث:

حلها!

بعد تغيير somehow.js إلى

$(document).ready(function() {
    $(".modal").on('shown', function() {
        $(this).find("[autofocus]:first").focus();
    });
});

و application.html.erb styleheetheet إلى:

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

يعمل كما هو متوقع. شكرًا لك مرة أخرى!


أزلت tabindex = "- 1" وهو يعمل لطيفة جدا.

كود HTML الخاص بي قبل التغييرات:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

كود HTML الخاص بي بعد التغييرات:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

رمز الإدخال الخاص بي:

<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>

وليس لدي أي تكوينات في رمز جافاسكريبت الخاص بي.


أعتقد أن اسم الحدث الذي تم shown تغير في Bootstrap 3 ، كما هو موضح في this المنشور.

كما يشير @MrDBA ، في Bootstrap 3 يتم shown اسم الحدث إلى shown.bs.modal .

لذا ، لاستخدام Bootstrap 3:

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus();
})

إذا كنت تواجه مشكلات في "shown.bs.modal" ، فما عليك سوى تعيين مهلة.

setTimeout(function() {
$('#myInput').focus();
}, 500);

جرّب إزالة tabindex="-1" ويعمل بشكل جيد.

لذا قم بتغيير هذا:

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

الى هذا:

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

للحصول على حل عام لا يتطلب رمزًا محددًا لكل مربع حوار ، يمكنك استخدام هذا:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})

يمكنك أيضا المحاولة

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});




twitter-bootstrap