আইডি থেকে আলাদা কোনও HTML ফর্মের প্রথম ইনপুট উপাদানটির দিকে আমি কীভাবে ফোকাস সেট করব?

Question

উপাদানটির আইডি না জেনে পাতা লোড করার জন্য প্রথম ইনপুট উপাদানটিতে (পাঠ্যবক্স, ড্রপডাউনলিস্ট, ...) কোনও ওয়েব পৃষ্ঠার ফোকাস (ইনপুট কার্সার) সেট করার কী সহজ উপায় আছে ?

আমি আমার ওয়েব অ্যাপ্লিকেশনের আমার সমস্ত পৃষ্ঠা / ফর্মগুলির জন্য একটি সাধারণ স্ক্রিপ্ট হিসাবে এটি প্রয়োগ করতে চাই।

Comments

ফর্মটি পৃষ্ঠাতে নীচে রেখে দেওয়া হয় যাতে ব্যবহারকারীকে ফর্মটি দেখতে পৃষ্ঠাটি স্ক্রোল করতে হয়, ফোকাসটি সেট করে নিজেই কোনও অ্যাঙ্কারের মতো পৃষ্ঠাটি নীচে স্ক্রোল করে। এটি খুব ভাল কারণ এটির পৃষ্ঠাতে ব্যবহারকারীরা তাৎক্ষণিকভাবে ফর্মের স্থানে স্ক্রোল করে দেখবে। আমি সাফারি এবং এফএফ পরীক্ষিত (আই 7 পৃষ্ঠা স্ক্রোলিং সম্পাদন করে না)।

— মার্কো ডেমাইও

@ মারকো_ডেমিও আমার ওয়েব অ্যাপটি এমনভাবে কাঠামোযুক্ত হয়েছে যাতে প্রতিটি পৃষ্ঠার উইন্ডোটির শীর্ষের কাছেই ইনপুট বাক্স থাকে।

— স্প্ল্যাটনে

যদি ব্যবহারকারী ব্রাউজার উইন্ডোটির উচ্চতা 768px এর চেয়ে ছোট কিছুতে আকার পরিবর্তন করে। পৃষ্ঠাটি যেখানে আপনি ফোকাস সেট করেছেন সেখানে স্ক্রোল করবে। যাইহোক আমি কেবলমাত্র আপনাকে সতর্ক করতে চেয়েছিলাম যদি আপনি এইরকম ছোটখাটো সমস্যা সম্পর্কে না জানেন তবে কিছু পরীক্ষা করার আগে আমি এটি সম্পর্কে জানতাম না।

— মার্কো ডেমাইও

Answer 1

আপনি jQuery ভিত্তিক পদ্ধতি ব্যবহার করে দেখতে পারেন:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

Comments

এটি কাজ করে! আমি আমার ওয়েব অ্যাপ্লিকেশনটিতে jQuery একীকরণ শুরু করছি। সুতরাং, আমি মনে করি আমি এই পদ্ধতির সাথে লেগে থাকব! অনেক ধন্যবাদ, মার্কো!

— স্প্ল্যাটনে

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

— জেমস হিউজেস

আমার ক্ষেত্রে (ASP.NET ব্যবহার করে) আমার কেবল একটি ফর্ম রয়েছে যা কখনও লুকানো হয় না। সুতরাং এটি আমার জন্য কাজ করে।

— স্প্ল্যাটনে

@ জামে হিউজেস, আপনি এটি একটি ফাংশন হিসাবে লিখতে পারেন এবং যখন আপনার প্রয়োজন হবে তখন এটি কল করতে পারেন এবং আপনি ব্যতিক্রম করতে পারেন। আমার জন্য এই সমাধানটি সত্যই সহায়তা করেছে।

— লুসি

এটি কোনও কারণে আমার পক্ষে কাজ করছে না। আমি কি কার্সার দেখতে পাচ্ছি না?

— ক্রিস

Answer 2

যদিও এটি প্রশ্নের উত্তর দেয় না (একটি সাধারণ স্ক্রিপ্টের প্রয়োজন), যদিও আমি অন্যদের পক্ষে এটি কার্যকর হতে পারে যে এইচটিএমএল 5 'অটোফোকাস' বৈশিষ্ট্যটি প্রবর্তন করে:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

এইচটিএমএল 5 তে ডুব দেওয়ার আরও তথ্য রয়েছে।

Comments

অটোফোকাস হ'ল বৈশিষ্ট্য। এর মান সম্পর্কে কী? অটোফোকাসের মতো কিছু দরকার = সত্যের দরকার নেই? কোন মান নির্ধারণ না করার অর্থ কী?

— গীক

এইচটিএমএল 5-তে কিছু বৈশিষ্ট্যের মান হওয়া দরকার না, 'পরীক্ষা করা' অন্য বৈশিষ্ট্য যেখানে এটি ক্ষেত্রে। আমি বিশ্বাস করি যে যখন মানটি ছেড়ে যায়, তখন বোঝানো হয় যে এটি নামের সাথে একই (যেমন অটোফোকাস = "অটোফোকাস" এবং চেকড = "চেক করা")।

— জ্যাকব স্ট্যানলি

যখন আমি autofocusকোনও মূল্য ছাড়াই ব্যবহার করার চেষ্টা করি তখন আমার স্প্রিং অ্যাপটি ব্রেক হয় spring:form। autofocus="autofocus"ভাল কাজ করে, যদিও। ধন্যবাদ, জ্যাকব

— সের্গেই তাচেনভ

@ গীক অটোফোকস অ্যাট্রিবিউট, অন্য অনেকগুলি, বুলিয়ান বৈশিষ্ট্য প্রকার। এ কারণেই এটি কোনও ঘোষণামূলক উপায়ে ব্যবহার করা হয়, এটির কোনও মূল্য নির্ধারণের মাধ্যমে নয়। ডাব্লু 3 সিতে

— पाया।

Answer 3

document.forms[0].elements[0].focus();

উদাহরণস্বরূপ লুপ ব্যবহার করে এটি পরিমার্জন করা যায়। নির্দিষ্ট ধরণের ক্ষেত্র, অক্ষম ক্ষেত্র এবং এগুলিকে কেন্দ্র করে না। উন্নত ক্ষেত্র আপনি আসলে একটি বর্গ = "অটোফোকাস" যোগ করা হতে পারে না ফরম [আমি] .elements [ঞ] যে classname খুঁজছেন উপর চান দৃষ্টি নিবদ্ধ করা এবং লুপ।

যাইহোক: প্রতিটি পৃষ্ঠায় এটি করা সাধারণত ভাল ধারণা নয়। আপনি যখন একটি ইনপুট ফোকাস করেন ব্যবহারকারী উদাহরণস্বরূপ ক্ষমতা হারাতে থাকে। কীবোর্ড থেকে পৃষ্ঠাটি স্ক্রোল করুন। যদি অপ্রত্যাশিত হয়, এটি বিরক্তিকর হতে পারে, সুতরাং যখন আপনি ফর্ম ক্ষেত্রটি ব্যবহার করে ব্যবহারকারী কী করতে চাইবে তা নিশ্চিত হওয়ার ক্ষেত্রে কেবল স্বয়ং-ফোকাস। অর্থাত্ আপনি যদি গুগল হন

Comments

সঠিক উত্তর হওয়া উচিত, কারণ প্রশ্নের কোনও জ্যাকোরি ট্যাগ নেই।

— ক্লে এইচ। ভারভাস

@ ক্লেএইচ.ভরাভাস না, এটি হ্রাস করা উচিত কারণ এটি এমন অনুমানগুলি তৈরি করে যা প্রশ্নে কোথাও পাওয়া যায় না, যেমন। কমপক্ষে একটি ফর্ম আছে সাধারণত, এটি কাজ করে না।

— 9 ইএসডিএক্স 9 আরভিজে 0lo

Answer 4

আমি যে সর্বাধিক বিস্তৃত jQuery এক্সপ্রেশনটি কাজ করেছিলাম তা হ'ল ( এখানে সাহায্যের মাধ্যমে )

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

Comments

আমি এটি ব্যবহার করছিলাম, লক্ষ্য করলাম যখন টেবিলের মধ্যে একটি বিশাল সংখ্যক> 1000 চেকবক্স রয়েছে তখন আইইতে এটি খুব ধীরে ধীরে চলে। এটি সম্পর্কে কী করবেন তা নিশ্চিত নন, কেবল প্রথম ইনপুট ক্ষেত্রে মনোযোগ কেন্দ্রীভূত করতে হবে।

— স্যাম ওয়াটকিন্স

Answer 5

আপনি যদি প্রোটোটাইপ জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করেন তবে আপনি ফোকাসফারস্টিমেট পদ্ধতিটি ব্যবহার করতে পারেন :

Form.focusFirstElement(document.forms[0]);

Answer 6

এখানে একটি লিখন লেখা রয়েছে যা ব্যবহারযোগ্য হতে পারে: ওয়েব পৃষ্ঠায় প্রথম ইনপুটটিতে ফোকাস সেট করুন

Answer 7

আপনার কোনও লুকানো ইনপুটও এড়ানো দরকার।

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();

Comments

আমি ভুল হতে পারি, তবে ফর্ম [0] এর কোনও লুকানো ইনপুট না থাকলে এই লুপটির সংজ্ঞায়িত আচরণ নেই।

— xtofl

হুবহু এটি কোনও শীর্ষস্থানীয় লুকানো ইনপুটগুলি এড়িয়ে যেতে ব্যবহৃত হয়। এবং এটি অনুমানের অধীনে লেখা আছে যে ফর্মটিতে কোনও গোপন ক্ষেত্র নেই। আমি এটি jQuery দিয়েও করতে পারতাম (আমি অন্য উত্তর পোস্ট করব) তবে আপনি jQuery এর সাথে জড়িত থাকতে চান তা উল্লেখ করেন নি।

— মার্কো ডুমিক

@ মার্কোডুমিক আপনি যদি কোনও whileবিবৃতি ব্যবহার করতে পারেন তবে কেন মেমোরি নষ্ট করবেন ?

— লুসিও

Answer 8

আপনার bodyট্যাগের শেষে এই কোডটি স্থাপন করা স্বয়ংক্রিয়ভাবে স্ক্রিনে প্রথম দৃশ্যমান, অ-লুকানো সক্ষম উপাদানটিকে ফোকাস করবে। এটি বেশিরভাগ ক্ষেত্রে হ্যান্ডল করবে আমি সংক্ষিপ্ত বিজ্ঞপ্তিতে প্রকাশ করতে পারি।

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>

Comments

এখানে বিবেচনা করার একটি বিষয় হ'ল এটি এমন উপাদানগুলির সাথে মেলে যা সেগুলি নিজেরাই লুকানো নয় তবে পূর্বপুরুষ। এর জন্য ডিওএম ব্যাকআপ নেওয়া এবং প্রতিটি পূর্বপুরুষের দৃশ্যমানতার পরীক্ষা করা দরকার যা আমি মনে করি যে এই ধরণের পরিস্থিতির জন্য গুরুতর ওভারকিল।

— জেমস হিউজেস

<ইনপুট টাইপ = "পাঠ্য" কেবলমাত্র পাঠ্য = "কেবল পাঠ্য" "সম্পর্কে আমার মনে হয় আপনার কোডে এই জাতীয় কেস যুক্ত করা উচিত I সাধারণত লোকেরা কেবল পাঠযোগ্য ইনপুট পাঠ্য ক্ষেত্রে মনোযোগ দিতে চায় না। যাইহোক সুন্দর কোড এবং +1 ধন্যবাদ!

— মার্কো ডেমাইও

স্বাক্ষরিত তবে আমি এটি! ফর্মগুলি দিয়ে আপডেট করেছি [i] [জে]। কেবলমাত্র! = অপরিজ্ঞাত

— জেমস হিউজেস

Answer 9

উপরের উত্তরগুলি প্রচুর চেষ্টা করেছে এবং সেগুলি কাজ করছে না। এটি এখানে পেয়েছে: http://www.kolodvor.net/2008/01/17/set-foc---frst-field-with-jquery/#comment-1317 ধন্যবাদ কলোডভোর আপনাকে ধন্যবাদ।

$("input:text:visible:first").focus();

Answer 10

আমি এটি ব্যবহার করছি:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

Answer 11

এটি টেক্সারিয়াস এবং নির্বাচিত বাক্সগুলি সহ যে কোনও দৃশ্যমান সাধারণ ইনপুটগুলির মধ্যে প্রথমটি পায়। এটিও নিশ্চিত করে যে তারা লুকানো, অক্ষম বা পঠনযোগ্য নয়। এটি আমার লক্ষ্য সফ্টওয়্যারটিতে (যেমন, এই ফর্মের প্রথম ইনপুট) ব্যবহার করে একটি লক্ষ্য ডিভের অনুমতি দেয়।

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

Answer 12

যারা JSF2.2 + ব্যবহার করেন এবং অটোফোকাসের মান হিসাবে এটি অ্যাট্রিবিউট হিসাবে পাস করতে পারবেন না, তাদের এটি ব্যবহার করুন:

 p:autofocus="true"

এবং এটি নেমস্পেস পিতে যুক্ত করুন (এছাড়াও প্রায়শই ব্যবহার করা হয় pt। আপনার যা পছন্দ তাই করুন)।

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

Answer 13

jquery ছাড়াই, যেমন নিয়মিত জাভাস্ক্রিপ্ট সহ:

document.querySelector('form input:not([type=hidden])').focus()

সাফারিতে কাজ করে তবে ক্রোম 75 নয় (এপ্রিল 2019)

Answer 14

সাথে AngularJS:

angular.element('#Element')[0].focus();

Answer 15

এটিতে টেক্সারিয়াস অন্তর্ভুক্ত এবং রেডিও বোতামগুলি বাদ দেয়

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});

Answer 16

আপনার পিতা-মাতা এই উপাদানটি লুকিয়ে থাকতে পারে বলে প্রদর্শন বৈশিষ্ট্যের জন্য পরীক্ষা করার পরিবর্তে ক্লায়েন্টহাইট ব্যবহার করতে সক্ষম হবেন:

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}

Answer 17

তৃতীয় পক্ষের libs ছাড়া, যেমন কিছু ব্যবহার করুন

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

নিশ্চিত হয়ে নিন যে আপনি সমস্ত ফর্মের উপাদান ট্যাগ বিবেচনা করেছেন, লুকানো / অক্ষমগুলিকে অন্যান্য উত্তরের মতো বাতিল করুন এবং আরও কিছু ..