জিকুয়ারি ব্যবহার করে কীভাবে ইনপুট ফিল্ডে ফোকাস সেট করবেন

Question

নিম্নলিখিত HTML গঠন দেওয়া:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

যা পৃষ্ঠায় বেশ কয়েকবার পুনরাবৃত্তি হবে, .bottomযখন আমি কোনও ডিভের লিঙ্কটিতে ক্লিক করি তখন আমি ডিভের ইনপুট ক্ষেত্রে কীভাবে ফোকাস সেট করব .top?

আমি বর্তমানে .bottomনীচের জিকুয়ারি কোডটি ব্যবহার করে ডিভিটিতে সফলভাবে উপস্থিত হতে দেখছি , তবে একই সাথে ইনপুট ক্ষেত্রে কীভাবে ফোকাস সেট করা যায় তা নির্ধারণ করা যায় না।

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

ধন্যবাদ!

Comments

আপনার প্রশ্নের উত্তর দেওয়া হয়েছে, তবে এটিও: আমি ধরে নিয়েছি return false;ইভেন্ট ইভেন্ট কলব্যাকের শেষে আপনিও সম্পাদন করছেন? নাকি function(e) { e.preventDefault(); ..... }? যদি তা না হয় তবে আপনার ব্রাউজারটি কলব্যাক কার্যকর করার পরে কেবলমাত্র সেই পৃষ্ঠাটিতে নেভিগেট করবে।

— সিমশান

@ সিমশান কোন পৃষ্ঠায় নেভিগেট করেছেন?

— রোলিং স্টোন 20

ঠিক আছে, আপনার উদাহরণে আপনি যখন সেই লিঙ্কটি ক্লিক করেন এটি উদাহরণ ডটকমে চলে যাবে ।

— সিমশান

ওহ, এটা ঠিক, মাথা আপ জন্য ধন্যবাদ!

— রোলিং পাথর

Answer 1

প্রথম ইনপুট ক্ষেত্রে ফোকাস সেট করতে এটি চেষ্টা করুন:

$(this).parent().siblings('div.bottom').find("input.post").focus();

Comments

input& এর মধ্যে স্থান :first। JQuery কি স্বয়ংক্রিয়ভাবে ছিটকে যায়? আমি সবসময় ভেবেছিলাম এটি হওয়া উচিত input:first।

— সিমশান

হ্যাঁ, আপনি এটি যেভাবেই লিখতে পারেন। আমি মনে করি input:firstএটি লেখার আরও আনুষ্ঠানিক উপায় হতে পারে, যদিও অন্যভাবে পড়া সহজ মনে হয়। তবে সম্ভবত এটি কেবল আমার :)

— জাস্টিন ইথিয়র

আমি অনুমান করি যেহেতু আমি এটির অভ্যস্ত, যখন আমি স্থানটি দেখি তখন স্বয়ংক্রিয়ভাবে "শিশু উপাদান" মনে করি এবং নিজেকে বিভ্রান্ত করতে এক সেকেন্ড সময় লাগে। তবে ওহে, আমি শুধু এটি দুর্দান্ত যে এটি কোনওভাবেই কাজ করে।

— সিমশান

এটি ঠিক করে দেওয়ার জন্য @ আসস্টিনে আমাকে আসলে এটি কিছুটা টুইট করতে হয়েছিল : $(this).parent().siblings('div.bottom').find("input.post").focus();তবে .find()আমি যে নির্বাচকটি খুঁজছিলাম তা হ'ল। মজার বিষয় input :firstনা input:firstকাজ।

— ঘূর্ণায়মান

আকর্ষণীয়, সম্ভবত ইনপুটটি কোনও formট্যাগের মধ্যে রয়েছে। যাইহোক, আপনি এটি কাজ করতে খুশি!

— জাস্টিন ইথিয়র

Answer 2

যদি ইনপুটটি বুটস্ট্র্যাপ মডেল সংলাপে ঘটে থাকে তবে উত্তরটি আলাদা। এটি প্রদর্শিত হওয়ার পরে বুটস্ট্র্যাপ মোডেলে প্রথম পাঠ্য ইনপুটটিতে ফোকাস সেট করবেন কীভাবে অনুলিপি করছেন :

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

Answer 3

জাস্টিনের উত্তর আমার পক্ষে কার্যকর হয়নি (ক্রোমিয়াম 18, ফায়ারফক্স 43.0.1)। jQuery এর .focus()ভিজ্যুয়াল হাইলাইট তৈরি করে তবে পাঠ্য কার্সারটি ফিল্ডে উপস্থিত হয় না (jquery 3.1.0)।

Https://www.sitepoint.com/jqueryhtml5-input-foc-cursor-positions/ দ্বারা অনুপ্রাণিত হয়ে আমি ইনপুট ক্ষেত্র এবং ভয়েলাতে অটোফোকাস বৈশিষ্ট্য যুক্ত করেছি !

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

Comments

আমার জন্য কাজ করেছেন। সরল সংস্করণটি এর মতো: $ ('। শ্রেণি ইনপুট') focus ফোকাস (); $ ('। শ্রেণি ইনপুট')। প্রপ ('অটোফোকাস');

— 25:55