: সক্রিয় সিউডো-ক্লাস মোবাইল সাফারিটিতে কাজ করে না

109

আইফোন / আইপ্যাড / আইপডের ওয়েবকিট-এ, স্টাইলিং নির্দিষ্ট করে: কোনও <a>ট্যাগের জন্য সক্রিয় সিউডো-ক্লাস যখন আপনি উপাদানটিতে ট্যাপ করেন তখন ট্রিগার হয় না। আমি কীভাবে এটি ট্রিগার করতে পারি? উদাহরণ কোড:

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

— জেসি রুসাক
সূত্র

238

<body ontouchstart="">
    ...
</body>

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

— wilsonpage
সূত্র

19

এটি ontouchstartছাড়া কেবল যোগ করার পক্ষে কি যথেষ্ট নয় =""? (এইচটিএমএল 5)

— ফিজলে

2

: ভবিষ্যতের কোনো পাঠকদের জন্য, আমি একটি ডেমো এখানে পোস্ট করেছি http://jsbin.com/EjiWILe/3/ । আপনার আইওএস ডিভাইসে কার্যকারিতা পরীক্ষা করুন।

— mululse

6

আপনি কেন খালি শ্রোতা শরীরে প্রয়োগ করেছেন তা ব্যাখ্যা করতে পারেন? এটি কিভাবে কাজ করে?

— মৌরিজিও বাট্টাঘিনী

2

আমি ব্যবহার করছিলাম: ফোকাস, এবং এটি তার জন্যও কাজ করে। ম্যাজিক জন্য ধন্যবাদ।

— টেকব্র্যাট

আমি এই পদ্ধতিটি ব্যবহার করে আইওএস 9.1 এবং 9.3 এ পৃষ্ঠাগুলি নিথর করছি ... এই সংস্করণগুলিতে একটি জেএস বাগ ছিল, তবে এখনও এই ওএসগুলিতে 0.5% ব্যবহারকারী রয়েছেন

— রাস্কিন

55

অন্যান্য উত্তরে যেমন বলা হয়েছে, আইওএস সাফারি :activeসিউডো-ক্লাসটি ট্রিগার করে না যদি উপাদানটির সাথে কোনও স্পর্শ ইভেন্ট সংযুক্ত না করা হয় তবে এখনও পর্যন্ত এই আচরণটি "জাদুকরী" হয়েছে। আমি সাফারি বিকাশকারী লাইব্রেরিতে এই সামান্য ব্লার্ব পেরিয়ে এসেছি যা এটি ব্যাখ্যা করে (আমার উপর):

আপনি -webkit-tap-highlight-colorডেস্কটপের অনুরূপ আচরণের জন্য বোতামগুলি কনফিগার করতে কোনও টাচ ইভেন্ট সেট করার সাথে সিএসএস সম্পত্তি ব্যবহার করতে পারেন । আইওএস-এ, মাউস ইভেন্টগুলি এত তাড়াতাড়ি পাঠানো হয় যে ডাউন বা সক্রিয় রাষ্ট্রটি কখনই গ্রহণ না করে। সুতরাং, :activeসিউডো রাষ্ট্রটি তখনই ট্রিগার করা হয় যখন এইচটিএমএল উপাদানটিতে কোনও স্পর্শ ইভেন্ট সেট থাকে example উদাহরণস্বরূপ, যখন অ্যান্টচার্ট্টটি উপাদানটির উপর নীচে সেট করা থাকে:
<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>
এখন যখন বোতামটি ট্যাপ করে আইওএস এ রাখা হয়, তখন বোতামটি আশেপাশের স্বচ্ছ ধূসর বর্ণের উপস্থিতি ছাড়াই নির্দিষ্ট রঙে পরিবর্তিত হয়।

অন্য কথায়, একটি ontouchstartইভেন্ট সেট করা (এটি খালি থাকলেও) স্পষ্টভাবে ব্রাউজারকে ইভেন্টগুলির স্পর্শে প্রতিক্রিয়া জানাতে বলছে।

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

(পার্শ্ব-নোট: আপনি যদি আইওএসে নিজস্ব কাস্টম শৈলী ব্যবহার করতে চান তবে উপরের একই লিঙ্কযুক্ত পৃষ্ঠায় বর্ণিত হিসাবে সিএসএস সম্পত্তি :activeব্যবহার করে আইওএস সিউডো-স্টেটের জায়গায় আইওএস যে ডিফল্ট ধূসর ট্রান্সলুসেন্ট বক্স ব্যবহার করে সেটিও অক্ষম করতে পারেন you -webkit-tap-highlight-color।)

কিছু পরীক্ষা-নিরীক্ষার পরে, সমস্ত স্পর্শ ইভেন্টগুলি পুরোপুরি কাজ করে না এমন বুকে বুদবুদ করার ontouchstartজন্য <body>উপাদানটিতে একটি ইভেন্ট স্থাপনের প্রত্যাশিত সমাধান । পৃষ্ঠাটি লোড হওয়ার পরে যদি উপাদানটি ভিউপোর্টে দৃশ্যমান হয়, তবে এটি ঠিক কাজ করে, তবে ভিউপোর্টের বাইরে থাকা কোনও উপাদানটিকে স্ক্রোল করে ট্যাপ করা তার সিউডো-স্টেটের মতো ট্রিগার করে না । সুতরাং, পরিবর্তে:active

<!DOCTYPE html>
<html><body ontouchstart></body></html>

ইভেন্টটি শরীরের উপর বুদবুদ হয়ে উঠার পরিবর্তে সমস্ত উপাদানগুলির সাথে সংযুক্ত করুন (jQuery ব্যবহার করে):

$('body *').on('touchstart', function (){});

তবে এর পারফরম্যান্সের প্রভাব সম্পর্কে আমি সচেতন নই, তাই সাবধান হন।

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

— user128216
সূত্র

6

কেন এবং কীভাবে নয় তার দুর্দান্ত ব্যাখ্যা ! ধন্যবাদ!

— কোডফলিন

6

কেবল একটি "ম্যাজিক" রেসিপি নয়, ডিভস বোঝার জন্য উত্সাহিত। এটি অন্যদের চেয়ে অসীম তথ্যপূর্ণ; আমাদের জন্য এটি লেখার জন্য আপনাকে ধন্যবাদ।

— ব্যবহারকারী 508633

বিস্তারিত ব্যাখ্যা + ক্যাভ্যাটস জন্য উত্সাহিত। এটি সঠিক উত্তর হওয়া উচিত।

— মাস্টার অফ ডাকস

39

আপনার <a> ট্যাগে অন্টচার্ট্টের জন্য ইভেন্ট হ্যান্ডলার যুক্ত করুন। এটি সিএসএসের কারণে যাদুবিদ্যায় কাজ করে।

<a ontouchstart="">Click me</a>

— জেসি রুসাক
সূত্র

3

দুঃখিত, এটি পুরানো উত্তর, তবে কেন এটি কাজ করে? আমি কারণ হিসাবে "জাদুকরী" কিছু মনে করি না, তবে এটি কেন কাজ করে তা যদি আপনি ব্যাখ্যা করতে পারেন তবে আমি আরও বিশদটি পড়তে চাই love

— mululse

1

@mulse আমি কেন তা জানতে আগ্রহী।

— জেসি রুশাক

হা! আমরা একই নৌকায় আছি আমি কিছু গবেষণা করার চেষ্টা করব এবং এখানে (আধা) অফিসিয়াল ডক্সের একটি লিঙ্ক এখানে পোস্ট করব। আমি এই কৌশলটি কাজ করে যে ভালোবাসি, আমি কেন অবাক?

— mhulse

7

এটি আমার পক্ষে কাজ করে:

document.addEventListener("touchstart", function() {},false);

দ্রষ্টব্য: আপনি যদি এই কৌশলটি করেন তবে এটি ডিফল্ট ট্যাপ – হাইলাইট রঙ অপসারণের জন্য কার্যকর যা নিম্নলিখিত সিএসএস বিধিটি ব্যবহার করে মোবাইল সাফারি প্রয়োগ করে।

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

— dhqvinh
সূত্র

5

8 ই ডিসেম্বর, ২০১ of, স্বীকৃত উত্তর ( <body ontouchstart="">...</body>) সাফারি 10 (আইফোন 5 এস) এ আমার পক্ষে কাজ করে না: হ্যাকটি কেবল সেই উপাদানগুলির জন্য কাজ করে যা পৃষ্ঠা লোডে দৃশ্যমান ছিল।

তবে যোগ করা হচ্ছে:

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>

থেকে headযেভাবে আমি চাই কাজ downside হয় যে এখন স্ক্রলিং এ সব কিছুই অনেক স্পর্শ ঘটনা ট্রিগার করে :activeস্পর্শ উপাদানে সিউডো-রাষ্ট্র। (এটি যদি আপনার সমস্যা হয় তবে আপনি ফাইটার জেটের কার্যকারিতা বিবেচনা করতে পারেন :hover))

— আলী
সূত্র

4

//hover for ios
-webkit-tap-highlight-color: #ccc;

এটি আমার পক্ষে কাজ করে, আপনি যে উপাদানটি হাইলাইট করতে চান তাতে আপনার সিএসএসে যুক্ত করুন

— লাল চোখ
সূত্র

3

আপনি কি ছদ্ম-শ্রেণীর সমস্ত ব্যবহার করছেন বা কেবল একটি? আপনি যদি কমপক্ষে দুটি ব্যবহার করছেন তবে নিশ্চিত হন যে তারা সঠিক ক্রমে আছেন বা তারা সকলেই ব্রেক করেছেন:

a:link
a:visited
a:hover
a:active

..সেই জন্য. এছাড়াও, আপনি যদি কেবল ব্যবহার করছেন: সক্রিয়, আপনি এটি স্টাইল না করলেও একটি: লিঙ্ক যুক্ত করুন।

— tahdhaze09
সূত্র

সিউডো ক্লাসগুলি স্টাইল করার সময় অর্ডার গুরুত্বপূর্ণ হওয়া সম্পর্কে দুর্দান্ত পরামর্শ।

— bianarpie

1

আমি একটি সরঞ্জাম প্রকাশ করেছি যা আপনার জন্য এই সমস্যাটি সমাধান করা উচিত।

পৃষ্ঠতলে সমস্যাটি সহজ দেখায়, তবে বাস্তবে স্পর্শ ও ক্লিকের আচরণটি "টাইম আউট ফাংশন এবং" আপনি যখন লিঙ্কগুলির একটি তালিকাতে স্ক্রোল করেন তখন কি হয় "বা" আপনি লিঙ্কটি টিপুন এবং তারপরে কী হয় "এর মতো বিষয়গুলি সহ বেশ বিস্তৃতভাবে কাস্টমাইজ করা দরকার then সক্রিয় অঞ্চল থেকে মাউস / আঙুল দূরে সরান "

এটি একবারে এগুলি সমাধান করা উচিত: https://www.npmjs.com/package/active-touch

আপনার হয় আপনার নিজের: সক্রিয় শৈলীগুলি .active শ্রেণিতে অর্পণ করা বা আপনার নিজের শ্রেণীর নাম চয়ন করতে হবে। ডিফল্টরূপে স্ক্রিপ্টটি সমস্ত লিঙ্ক উপাদানগুলির সাথে কাজ করবে, তবে আপনি এটি নির্বাচিতদের নিজস্ব অ্যারে দিয়ে ওভাররাইট করতে পারেন।

সৎ, সহায়ক প্রতিক্রিয়া এবং অবদানগুলি অনেক প্রশংসা করেছে!

— dmitrizzle
সূত্র

2

লাইব্রেরির প্রত্যেক লিংক উপাদানে 9 (অ প্যাসিভ) ঘটনা শ্রোতাকে যোগ কিন্তু removeEventListener কল করে না - এই একক পৃষ্ঠা অ্যাপ্লিকেশনের জন্য একটি বড় ত্রুটি আমি মনে করি হবে

— Drenai

1

ধন্যবাদ রায়ান আমি এক বছরেরও বেশি সময় ধরে এই কোডটিকে সমর্থন করছি না বা ব্যবহার করছি না; আমি এটা নামিয়ে নেব। কিছু চিন্তাভাবনা এবং পরীক্ষা-নিরীক্ষার পরে আমি ব্রাউজারগুলির মাধ্যমে জবাবদিহি না করা বা চিন্তাভাবনা না করার জন্য জোর করার চেষ্টা করার পরিবর্তে অ্যাপটির নকশা পরিবর্তন করেছি changed

— dmitrizzle

1

যারা অনটচ স্টার্টটি ব্যবহার করতে চান না তাদের জন্য আপনি এই কোডটি ব্যবহার করতে পারেন

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>

— নূব দেব
সূত্র

1

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

পুনরায় নামকরণ করা সিএসএসের ঘোষণাপত্র যা :activeছিল .active।

সমস্ত প্রভাবিত উপাদানগুলির একটি তালিকা তৈরি করুন এবং শ্রেণি এবং ইভেন্ট হ্যান্ডলারগুলি এটি সরাতে pointerdown/mousedown/touchstartপ্রয়োগ করতে ইভেন্ট হ্যান্ডলার যুক্ত করুন। JQuery ব্যবহার:.activepointerup/mouseup/touchend

let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";

let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
    $(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
    $(this).removeClass('active');
});

এটি কিছুটা ক্লান্তিকর ছিল তবে এখন আমার কাছে এমন একটি সমাধান রয়েছে যা অ্যাপল ওএস সংস্করণগুলির মধ্যে ভাঙ্গনের পক্ষে কম ঝুঁকিপূর্ণ। (এবং এই ব্রেকিংয়ের মতো কার দরকার?)

— daffinm
সূত্র

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

— ড্যাফিনম

0

একটি সমাধান এর :targetপরিবর্তে নির্ভর করা হয় :active:

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>

বর্তমান ইউআরএল দ্বারা অ্যাঙ্কর টার্গেট করা হলে স্টাইলটি ট্রিগার করা হবে যা এমনকি মোবাইলেও শক্ত। ত্রুটিটি হ'ল ইউআরএল-এ অ্যাঙ্কর সাফ করার জন্য আপনার অন্য একটি লিঙ্কের প্রয়োজন। সম্পূর্ণ উদাহরণ:

a:target { 
    background-color: red;
}

<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>

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

— rgmt
সূত্র

-3

এই প্রশ্নের সাথে কোনও 100% সম্পর্কিত নয়, তবে আপনি এটি অর্জন করতে CSS ভাইবোন হ্যাক ব্যবহার করতে পারেন

এইচটিএমএল

<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>

SCSS

input {
    &:checked + label {
      background-color: red;
    }
  }

আপনি যদি খাঁটি এইচটিএমএল / সিএসএস টুলটিপ ব্যবহার করতে চান

span {
  display: none;
}
input {
    &:checked ~ span {
      display: block;
    }
  }

— Seeliang
সূত্র

-6

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">

<title></title>

<style>
        a{color: red;}
        a:hover{color: blue;}
</style>
</head>

<body>

        <div class="main" role="main">
                <a href="#">Hover</a>
        </div>

</body>
</html>

— TroyM
সূত্র

1

FAQ অনুযায়ী, স্বাক্ষর এবং স্ব-প্রচার অনুমোদিত নয়।

— লিটলববি টেবিলগুলি - এউ প্রত্যাহার