বুটস্ট্র্যাপ মোডাল দেখানোর পরে প্রথম পাঠ্য ইনপুটটিতে কীভাবে ফোকাস সেট করবেন

Question

আমি একটি ডায়নামিক বুটস্ট্র্যাপ মডেল লোড করি এবং এতে কয়েকটি পাঠ্য ইনপুট থাকে। আমি যে সমস্যার মুখোমুখি হচ্ছি আমি চাই যে কার্সারটি এই মডেলের প্রথম ইনপুটটিতে ফোকাস করবে এবং এটি ডিফল্টরূপে ঘটছে না।
তাই আমি এটি করতে এই কোডটি লিখেছি:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

তবে এখন এটি এক মুহুর্তের জন্য ইনপুটটিতে ফোকাস করে তবে স্বয়ংক্রিয়ভাবে চলে যায়, কেন এমন হচ্ছে এবং কীভাবে সমাধান করবেন?

Comments

আপনি jsfiddle.net একটি ডেমো সরবরাহ করতে পারেন ?

— undefined

এর জন্য একটি সময়সীমা নির্ধারণের চেষ্টা করুন, অন্য কোনও কিছু হস্তক্ষেপ করছে। setTimeout(function() { /* Your code */ }, 100);

— কিওয়ারটি

আপনি কি আমার জন্য এটি চেষ্টা করতে পারেন ... var সূচক = 0; $ ('# মডেলকন্টেইনার')। ('শো', ফাংশন () {সূচক = 1;;); যদি (সূচক) {$ ('ইনপুট: পাঠ্য: দৃশ্যমান: প্রথম') focus ফোকাস (); }

— চিরাগ গিয়াদ

টুইটার বুটস্ট্র্যাপ মডেল ইনপুট ফিল্ড ফোকাসের

— মুহাম্মদ রেহান সা Saeedদ

Answer 1

টুইটার বুটস্ট্র্যাপ - আপনার কাছে @ স্কুমার উত্তর রয়েছে: ক্লিকের কোনও মডেলের অভ্যন্তরে টেক্সারিয়ায় ফোকাস করুন

বুটস্ট্র্যাপ 2 এর জন্য

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

আপডেট: বুটস্ট্র্যাপ 3 এর জন্য

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

========== আপডেট ======

একটি প্রশ্নের উত্তরে আপনি একই পৃষ্ঠায় একাধিক মডেলের সাথে এটি ব্যবহার করতে পারেন যদি আপনি বিভিন্ন ডেটা-টার্গেট নির্দিষ্ট করে থাকেন, ফর্ম ইনপুট ক্ষেত্রগুলির আইডি মেলে এবং আপডেট করতে আপনার মডেলের আইডিগুলির নাম পরিবর্তন করেন এবং শেষ পর্যন্ত এই নতুনটির সাথে মেলে আপনার জেএস আপডেট করুন আইডি:
দেখুন http://jsfiddle.net/panchroma/owtqhpzr/5/

এইচটিএমএল

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

জাতীয়

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

Comments

এটি কেবলমাত্র পৃষ্ঠায় কোনও মডেল থাকলে কাজ করে? একের বেশি হলে কী হবে?

— রমেশ পেরিক

দুর্দান্ত, দ্রুত তিরস্কার! আমি একটি নির্বোধ ত্রুটি করেছি, এখন কাজ!

— রমেশ পরিক

এটির কাজটি করার চেষ্টা করার প্রায় এক ঘন্টা চেষ্টা করার পরে আমি আপনার উত্তরে "শো" থেকে "দেখানো" তে আমার কোডটি পরিবর্তন করছি to

— গ্যাম্বোয়া

Jquery বৈধতা প্রবাহিত হওয়ার পরে এটি সর্বাধিক কলস্ট্যাক ত্রুটি দেয়! সুতরাং এটি আমার কোন উপকারে আসে না।

— Vandita

@ ভান্দিতা, আপনি কোডেপেন.ওয়ে কোনও কলম শুরু করতে চান যা আপনার বর্ণিত সমস্যার চিত্র তুলে ধরেছে আমি আপনার জন্য এটি দেখে খুশি হব।

— ডেভিড তাইয়ারোয়া

Answer 2

আমি jQuery ছাড়াই এটি করার সর্বোত্তম উপায়টি খুঁজে পেয়েছি।

<input value="" autofocus>

পুরোপুরি কাজ করে।

এটি একটি এইচটিএমএল 5 বৈশিষ্ট্য। সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত।
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Comments

এই কাজটি কীভাবে হওয়া উচিত তা পেতে কয়েক ঘন্টা চেষ্টা করার পরে (ক্লিক করুন বা হ্যান্ডলারগুলিতে) আমি কেবল একটি পদ্ধতি খুঁজে পেয়েছি যা কাজ করে যা এইচটিএমএল 5 অটোফোকাস বৈশিষ্ট্য:<input type="text" class="form-control" placeholder="" autofocus>

— লট0্লোগস

এখানে আপনি এমভিসি 3 নিয়ন্ত্রণে এটি কীভাবে করতে পারেন তা এখানে রয়েছে: @Html.TextBoxFor(m => m.UserName, new { @autofocus="" })

— ফ্লাই

এটি আমার পক্ষে কাজ করেনি ... বুটস্ট্র্যাপ

— মডেল

আমিও অটোফোকাস ব্যবহার করার সময় বুটস্ট্র্যাপ মডেল প্রদর্শিত হওয়ার পরে এক মুহুর্তের জন্য ইনপুট লাভের ফোকাস দেখতে পাই। যাইহোক, ইনপুট তখন ফোকাস হারায়। .On () হ্যান্ডলারটি বাস্তবায়ন করতে হয়েছিল।

— রাদেবাস

আপনি যদি tabdindex="-1"আপনার মডেল থেকে সরান তবে এটি কাজ করে, তবে এটি কেবল একবারে কাজ করে। বন্ধ এবং পুনরায় খোলার বিষয়টি ফোকাস করে না।

— মেমেট ওলসেন

Answer 3

ডেভিড তাইয়ারোয়া এর উত্তর সঠিক, তবে কাজ করে না কারণ মডেলটির "বিবর্ণ" হওয়ার সময় আপনাকে ইনপুটটিতে ফোকাস সেট করতে দেয় না। আপনার একটি বিলম্ব তৈরি করতে হবে:

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

})

Comments

আপনি এখানে একমাত্র অধিকার। আপনার সমাধান একমাত্র কাজ করে। আমি টাইমআউটের জন্য একটি ছোট মান সেট করার চেষ্টা করেছি কিন্তু কার্যকর হয়নি। মডেল 1000ms এ "লোডিং শেষ করে" বলে মনে হচ্ছে :(

— এনরিক

হ্যাঁ, তবে আজ, আমার নতুন প্রকল্পে, আমি <input value="" autofocus>এই সময়টি আমার জন্য ভাল ব্যবহার করেছি এবং কাজ করেছি, আজব

— মার্কোস ফুরকিম

সঠিকটি দেখানো.বস.মডাল ইভেন্টটি ব্যবহার করা: getbootstrap.com/ javascript

— #

সেটটাইমআউট () ব্যবহারের পরিবর্তে, আপনি নিম্নলিখিতগুলির মতো বিলম্ব () ব্যবহার করতে পারেন ... $ ('# টেক্সারইআইডি')। বিলম্ব (1000) .ফোকাস () নির্বাচন করুন ();

— টনি

অবশ্যই সংশোধন সমাধান।

— ফ্রাঙ্ক থমাস 16

Answer 4

সাধারণ কোড (নীচে) আমার পক্ষে কাজ করে না :

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

আমি সমাধানটি খুঁজে পেয়েছি :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

আরও এখানে দেখুন

Answer 5

আমি পেয়েছি বুটস্ট্র্যাপ তাদের পৃষ্ঠায় নিম্নলিখিত তথ্য যুক্ত করেছে:

এইচটিএমএল 5 কীভাবে এর শব্দার্থককে সংজ্ঞায়িত করে, অটোফোকাস এইচটিএমএল বৈশিষ্ট্যটির বুটস্ট্র্যাপ মডেলগুলিতে কোনও প্রভাব নেই। একই প্রভাব অর্জন করতে কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:

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

http://getbootstrap.com/javascript/#modals

Answer 6

এটি এমন সাধারণ কোড যা আপনার ফোকাসের সাথে কোনও ইনপুট ক্ষেত্র রয়েছে এমন সমস্ত পপআপগুলিতে সেরা কাজ করবে

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

Answer 7

আমি মনে করি যে jQuery এর ব্যবহার ধরে ধরে সবচেয়ে সঠিক উত্তর হ'ল এই পৃষ্ঠার সমস্ত উত্তরের দিকগুলির একীকরণ, এবং বুটস্ট্র্যাপ যে ইভেন্টটি পাস করবে তার ব্যবহার:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

এটি মোডলে পরিবর্তিত $(document)হতে $('.modal')বা কোনও ক্লাস যুক্ত করার কাজ করে যা সংকেত দেয় যে এই ফোকাসটি হওয়া উচিত, যেমন$('.modal.focus-on-first-input')

Comments

এটি আমি এখানে দেখেছি সেরা, সবচেয়ে সাধারণ সমাধান :)

— মার্টিন টি।

আপনি যদি এটি কেবল পঠনযোগ্য পাঠ্যবাক্সগুলিকে উপেক্ষা করতে চান তবে পড়ার জন্য লাইনটি সংশোধন করুন: $ ('ইনপুট: দৃশ্যমান: সক্ষম: নয় ([কেবলমাত্র পাঠ্য]): প্রথম', e.target) .ফোকাস ();

— ডগলাস টিমস

Answer 8

এই কোডটি চেষ্টা করুন, এটি আপনার পক্ষে কার্যকর হতে পারে

$(this).find('input:text')[0].focus();

Comments

আমি যা ব্যবহার করি তা এখানে:$(this).find('input:text').first().focus()

— জিমি

Answer 9

প্রথম পদক্ষেপ, আপনাকে autofocusফর্ম ইনপুটটিতে আপনার বৈশিষ্ট্যটি সেট করতে হবে ।

<input name="full_name" autofocus/>

এবং তারপরে আপনার মডেলটি দেখানোর পরে আপনাকে নিজের ইনপুটটির অটোফোকাস সেট করতে ঘোষণা যুক্ত করতে হবে।
এই কোড ব্যবহার করে দেখুন:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Comments

আমি $ (এটি) .ফাইন্ড ('[অটোফোকাস]') ব্যবহার করেছি focus ফোকাস (); এবং এটি কাজ করে

— সামাররাইন

Answer 10

আপনি যদি খালি যে কোনও মডেলকে স্বয়ংক্রিয়ভাবে ফোকাস করতে চান তবে আপনি প্রথমে ইনপুটটিতে ফোকাস দেবে এমন এই স্নিপেটটি আপনার নিদর্শন বা লিব ফাংশন রাখতে পারেন:

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

Answer 11

যদি আপনি এমন স্নিপেট সন্ধান করছেন যা আপনার সমস্ত মডেলের জন্য কাজ করবে এবং খোলা একটিতে 1 ম ইনপুট পাঠ্যের জন্য স্বয়ংক্রিয়ভাবে অনুসন্ধান করবে, আপনার এটি ব্যবহার করা উচিত:

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

যদি আপনার মোডালটি এজ্যাক্স ব্যবহার করে লোড হয় তবে পরিবর্তে এটি ব্যবহার করুন:

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

Answer 12

এটি সর্বাধিক সাধারণ সমাধান

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• পৃষ্ঠা লোডের পরে ডিওমে যুক্ত হওয়া মডেলগুলির সাথে কাজ করে
• ইনপুট, টেক্সারিয়ার সাথে কাজ করে, নির্বাচন করুন এবং বোতামটি দিয়ে নয়
• লুকানো, অক্ষম, কেবলমাত্র পাঠানো বাদ দেয়
• বিবর্ণ মডেলগুলির সাথে কাজ করে, সেট-ইনটারওয়ালের কোনও প্রয়োজন নেই

Answer 13

যখন আপনার ইনপুট / পাঠ্যবক্সটি খোলা থাকবে তখন মডেলের ট্যাবআইন্ডেক্স সম্পত্তিটি সরিয়ে দেওয়ার চেষ্টা করুন । আপনি যখন ইনপুট / পাঠ্যবক্সটি বন্ধ করেন তখন এটি যা ছিল তা আবার সেট করুন। এটি নির্বিশেষে বুটস্ট্র্যাপ সংস্করণটি এবং ব্যবহারকারীর অভিজ্ঞতার প্রবাহকে আপস না করেই সমস্যার সমাধান করবে ।

Answer 14

বুটস্ট্র্যাপ 4 ডক্স অনুসারে:

এইচটিএমএল 5 কীভাবে এর শব্দার্থককে সংজ্ঞায়িত করে, অটোফোকাস এইচটিএমএল বৈশিষ্ট্যটির বুটস্ট্র্যাপ মডেলগুলিতে কোনও প্রভাব নেই। একই প্রভাব অর্জন করতে কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।

উদাহরণ:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

লিঙ্ক ।

Answer 15

সঠিক ফর্ম উপাদানটি অনুসন্ধান করতে অটোফোকাস ব্যবহার করুন:

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

Answer 16

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• এটি "# বাটন" যা মডেল ফর্মটিকে কল করে,

• "# মাইমোডাল" হল মডেল রূপ,

• "# মাইনপুট" হ'ল ইনপুট যা আপনি ফোকাস পেতে চান