আপনি কীভাবে প্রোগ্রামটিমেটিকভাবে কোনও এইচটিএমএল সিলেক্টকে ড্রপ ডাউন করতে বলতে পারেন (উদাহরণস্বরূপ, মাউসওভারের কারণে)?

Question 1

আপনি প্রোগ্রামটিমে কোনও HTML selectকে কীভাবে ड्रপ ডাউন করতে বলতে পারেন (উদাহরণস্বরূপ, মাউসওভারের কারণে)?

Question 2

আপনি এইচটিএমএল নির্বাচন ট্যাগ দিয়ে এটি করতে পারবেন না, তবে আপনি এটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল দিয়ে করতে পারেন do এটি বিভিন্ন রকম বিদ্যমান নিয়ন্ত্রণগুলি করে - উদাহরণস্বরূপ, এসও "আকর্ষণীয় / উপেক্ষা করা ট্যাগ" এন্ট্রি, বা ইমেল ঠিকানাগুলির জন্য জিমেইলের অনুসন্ধানের সাথে যুক্ত "প্রস্তাবিত" তালিকা।

অনেকগুলি জাভাস্ক্রিপ্ট + এইচটিএমএল নিয়ন্ত্রণ রয়েছে যা এই ক্ষমতাটি সরবরাহ করে - ধারণাগুলির জন্য স্বতঃসিদ্ধ নিয়ন্ত্রণগুলি সন্ধান করুন।

স্বতঃসিদ্ধ নিয়ন্ত্রণের জন্য এই লিঙ্কটি দেখুন ... http://ajaxcontroltoolkit.codeplex.com/

Question 3

এটি HTML + জাভাস্ক্রিপ্টের মাধ্যমে প্রকৃত পক্ষে সম্ভব হত, অন্য কোথাও সত্ত্বেও লোকে বলে যে এটি তা নয়, তবে এটি পরে অবচয় করা হয়েছিল এবং এখন তা কার্যকর হয় না।

তবে এটি কেবল ক্রোমে কাজ করেছে। আপনার আগ্রহ থাকলে আরও পড়ুন।

এইচটিএমএল 5 এর জন্য ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্ট অনুসারে বিভাগ 3.2.5.1.7। ইন্টারেক্টিভ সামগ্রী :

এইচটিএমএলের কিছু উপাদানগুলির একটি অ্যাক্টিভেশন আচরণ রয়েছে যার অর্থ ব্যবহারকারী তাদের সক্রিয় করতে পারে। এটি অ্যাক্টিভেশন প্রক্রিয়ার উপর নির্ভরশীল ইভেন্টগুলির একটি ক্রমকে ট্রিগার করে [...] উদাহরণস্বরূপ কীবোর্ড বা ভয়েস ইনপুট ব্যবহার করে বা মাউস ক্লিকের মাধ্যমে through ।

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

<select>একটি ইন্টারেক্টিভ সামগ্রী হিসাবে, আমি বিশ্বাস করি যে এটির অগ্রগতিভাবে এটি প্রদর্শিত সম্ভব <option>। কয়েক ঘন্টা ঘুরে দেখার পরে, আমি আবিষ্কার করেছি যে এটি ব্যবহার করে document.createEvent()এবং .dispatchEvent()কাজ করে।

ডেমো সময় বলেছে। এখানে একটি কর্মরত ফিডল।

এইচটিএমএল:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>

জাভাস্ক্রিপ্ট:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

যদি কারও কাছে একই কাজ করার উপায় পাওয়া যায় তবে ক্রোমে না পাওয়া যায় তবে দয়া করে এই ফিডলটি সংশোধন করুন । اور

Question 4

জাভিয়ের হো এর উত্তরটি এখন বেশিরভাগ ব্রাউজারগুলিতে কীভাবে সমস্যাটি সমাধান করা যায় তা কভার করছে। তবে, জাভাস্ক্রিপ্ট দ্বারা ইভেন্টগুলি 'প্রেরণ / সংশোধন না করা' ভাল অভ্যাস । (যেমন, mousedownএই ক্ষেত্রে)

53+ সংস্করণ থেকে গুগল ক্রোম অবিশ্বস্ত ইভেন্টগুলির জন্য ডিফল্ট ক্রিয়া সম্পাদন করবে না । যেমন স্ক্রিপ্ট দ্বারা তৈরি বা সংশোধিত ইভেন্টগুলি, বা dispatchEventপদ্ধতির মাধ্যমে প্রেরণ করা । এই পরিবর্তনটি ফায়ারফক্স এবং আইইয়ের সাথে সারিবদ্ধ করার জন্য যা আমি মনে করি ইতিমধ্যে ক্রিয়াটি সম্পাদন করছে না।

পরীক্ষার উদ্দেশ্যে, ফিডল উত্তর ক্রোম 53+ এ কাজ করবে না বলে সরবরাহ করেছিলেন। (আমি এটি এফএফ এবং আইই পরীক্ষা করি না)।

রেফারেন্সের জন্য লিঙ্কগুলি:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

আর initMouseEvent হয় অবচিত

Question 5

এটি আমি যে নিকটতম পেলাম, এটি অন-মাউসওভার উপাদানের আকার পরিবর্তন করতে এবং অন-মাউসআউটের আকারটি পুনরুদ্ধার করতে পারে:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

স্নিপেট প্রসারিত করুন

Question 6

আমার এই একই সমস্যা এবং এর সমাধানের সহজ উপায়টি আমি এইচটিএমএল এবং সিএসএস দিয়ে পেয়েছি।

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

স্নিপেট প্রসারিত করুন

Question 7

আমার মনে হয় ক্রোমে এটি আর সম্ভব নয়।

মনে হচ্ছে ক্রোমের 53 টি সংস্করণ অসীম কে টি দ্বারা বর্ণিত এই কার্যকারিতাটি অক্ষম করে

অনুমান অনুসারে http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

বিশ্বস্ত ইভেন্টগুলি ডিফল্ট ক্রিয়াকলাপটি ক্লিক করা উচিত নয় (ক্লিক ইভেন্ট ব্যতীত)।

তারা তবে এটি ওয়েবভিউতে সক্ষম করেছে, তবে আমি এটি পরীক্ষা করেছি না।

আমরা দেখতে পেয়েছি যে কিছু ওয়েবভিউগুলি তাদের মধ্যে ফাস্টক্লিক ব্যবহার করছে এবং ভাঙ্গনের ঝুঁকির কারণে আমরা নির্বাচিতদের উপর অবিশ্বস্ত থাকলেও মোডসডাউনটি মঞ্জুর করতে যাচ্ছি।

এবং এই আলোচনায় বিকাশকারীগণকে প্রোগ্রামগতভাবে একটি ড্রপডাউন খোলার ধারণাটি পরিত্যাগ করা হয়।

Question 8

যদি এখনও কেউ এটি খুঁজছেন:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

জাভাস্ক্রিপ্ট:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

হালনাগাদ:

এক্ষেত্রে এই সমস্যার কোনও নিখুঁত সমাধান না পাওয়া পর্যন্ত আপনি এই দৃশ্যটি এড়াতে চেষ্টা করতে পারেন। আপনি কেন এটা করতে চান. মোবাইল ডিভাইসগুলির জন্য একটি নির্বাচিত প্লাগইন তৈরি করতে কয়েক মাস আগে আমি একটি সমাধানের জন্য ভাবছিলাম

https://github.com/HemantNegi/jquery.sumoselect

অবশেষে স্বচ্ছ নির্বাচন উপাদান সহ কাস্টম ডিভ (বা অন্য কোনও উপাদান) মাস্কিংয়ের সাথে শেষ হয়েছে, যাতে এটি সরাসরি ব্যবহারকারীর সাথে ইন্টারেক্ট করতে পারে।

Question 9

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

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

Question 10

এক জিনিস অসম্ভব বলে ভেবে থামুন, কিছুই করা অসম্ভব, যখন আপনি করতে চান।

একটি লোক দ্বারা নির্মিত এই প্রসারিত জেএস ফাংশনটি ব্যবহার করুন।

http://code.google.com/p/expandselect/

এই জেএস অন্তর্ভুক্ত করুন এবং কেবল সেইটিকে পছন্দ করুন যে আপনার পছন্দসই আইডি হিসাবে পরমকে পাস করছে:

ExpandSelect(MySelect)

Question 11

আমি ভুল হতে পারি, তবে আমি বিশ্বাস করি না যে এটি ডিফল্ট নির্বাচন বাক্সের মাধ্যমে সম্ভব possible আপনি জেএস এবং সিএসএসের সাথে এমন কিছু করতে পারেন যা পছন্দসই ফলাফল অর্জন করে, তবে (আমার জ্ঞানের কাছে) ভ্যানিলা নির্বাচন নয়।

Question 12

"এইচটিএমএল নির্বাচন" খোলার বিষয়টি এই প্রশ্নটিতে উল্লিখিত কিছু কাজের ভিত্তিতে এবং অনুরূপগুলির দ্বারা সম্ভব। তবে এটির একটি পরিষ্কার উপায় হল আপনার প্রকল্পে একটি নির্বাচনী লাইব্রেরি যুক্ত করা যেমন "সিলেক্ট 2" বা "নির্বাচিত"। উদাহরণস্বরূপ, একটি সিলেক্ট 2 প্রোগ্রামিকভাবে খোলার জন্য এত সহজ হবে:

$('#target-select').select2('open');

Question 13

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

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();