અનિચ્છનીય લખાણ પસંદગી અટકાવવી
બટનોની જેમ કાર્ય કરતા એન્કર માટે, જેમ કે સ્ટેક ઓવરફ્લો સાઇડબાર (પ્રશ્નો, ટૅગ્સ અને વપરાશકર્તાઓ), જ્યારે વપરાશકર્તાઓ આકસ્મિક રીતે ટેક્સ્ટને હાઇલાઇટ કરે છે ત્યારે તે નિરાશાજનક બની શકે છે. આ ઘણી વખત ત્યારે થાય છે જ્યારે આ ઘટકોનો ઉપયોગ નેવિગેશન અથવા ક્રિયાઓ માટે કરવામાં આવે છે, જ્યાં ટેક્સ્ટની પસંદગી અનિચ્છનીય હોય છે.
જ્યારે JavaScript ટેક્સ્ટ પસંદગીને રોકવા માટે ઉકેલો પ્રદાન કરે છે, ત્યારે તે જાણવું ફાયદાકારક છે કે શું CSS પ્રમાણભૂત-સુસંગત પદ્ધતિ પ્રદાન કરે છે. આ લેખ CSS નો ઉપયોગ કરીને ટેક્સ્ટ સિલેક્શન હાઇલાઇટિંગને કેવી રીતે અક્ષમ કરવું તે શોધે છે અને આ અસર હાંસલ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓની ચર્ચા કરે છે.
| આદેશ | વર્ણન |
|---|---|
| -webkit-user-select | સફારી બ્રાઉઝર્સમાં ટેક્સ્ટ સિલેક્શનને અક્ષમ કરવા માટે CSS પ્રોપર્ટી. |
| -moz-user-select | ફાયરફોક્સ બ્રાઉઝર્સમાં ટેક્સ્ટ સિલેક્શનને અક્ષમ કરવા માટે CSS પ્રોપર્ટી. |
| -ms-user-select | ઈન્ટરનેટ એક્સપ્લોરર 10+ માં ટેક્સ્ટ સિલેક્શનને અક્ષમ કરવા માટે CSS પ્રોપર્ટી. |
| user-select | આધુનિક બ્રાઉઝર્સમાં ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે માનક CSS ગુણધર્મ. |
| onselectstart | તત્વ પર ટેક્સ્ટની પસંદગી અટકાવવા માટે JavaScript ઇવેન્ટ હેન્ડલર. |
| querySelectorAll | પસંદગીકારોના નિર્દિષ્ટ જૂથ સાથે મેળ ખાતા તમામ ઘટકોને પસંદ કરવા માટે JavaScript પદ્ધતિ. |
ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે સ્ક્રિપ્ટ્સને સમજવું
CSS નો ઉપયોગ કરીને ટેક્સ્ટ સિલેક્શન હાઇલાઇટિંગને અક્ષમ કરવા માટે, અમે લાગુ કરીએ છીએ , , , અને user-select ગુણધર્મો આ પ્રોપર્ટીઝ વિવિધ બ્રાઉઝર્સને પૂરી કરે છે, ક્રોસ-બ્રાઉઝર સુસંગતતા સુનિશ્ચિત કરે છે. આ ગુણધર્મોને પર સેટ કરીને , ટેક્સ્ટ પસંદગી અક્ષમ છે, વપરાશકર્તાઓને સાથે તત્વોમાં ટેક્સ્ટને હાઇલાઇટ કરવાથી અટકાવે છે વર્ગ
JavaScript ઉદાહરણમાં, અમે દસ્તાવેજમાં એક ઇવેન્ટ લિસનર ઉમેરીએ છીએ જે એકવાર DOM સામગ્રી સંપૂર્ણ લોડ થઈ જાય તે પછી એક્ઝિક્યુટ થાય છે. આ પદ્ધતિ સાથે તમામ ઘટકો પસંદ કરે છે વર્ગ દરેક પસંદ કરેલ તત્વ માટે, ધ ઇવેન્ટ પરત કરવા માટે ઓવરરાઇડ કરવામાં આવી છે false, ટેક્સ્ટની પસંદગી અટકાવી રહી છે. CSS અને JavaScriptનું આ સંયોજન વિવિધ બ્રાઉઝર્સ અને દૃશ્યોમાં ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે મજબૂત ઉકેલની ખાતરી આપે છે.
ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે CSS પદ્ધતિ
ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે CSS નો ઉપયોગ કરવો
/* CSS to disable text selection */.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}
ટેક્સ્ટ પસંદગીને રોકવા માટે JavaScript અભિગમ
ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે JavaScript ઉકેલ
/* JavaScript to disable text selection */document.addEventListener('DOMContentLoaded', (event) => {document.querySelectorAll('.no-select').forEach((element) => {element.onselectstart = function() {return false;};});});
પ્રેક્ટિકલ એપ્લિકેશન માટે CSS અને HTMLનું સંયોજન
CSS અને HTML સાથે વ્યવહારુ ઉદાહરણ
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard */}</style></head><body><div class="no-select">Non-selectable text</div></body></html>
વધુ ઉકેલોની શોધખોળ
વેબ એપ્લિકેશન્સમાં ટેક્સ્ટ પસંદગીને રોકવા માટેનો બીજો અભિગમ એનો ઉપયોગ કરી રહ્યો છે HTML માં લક્ષણ. આ એટ્રિબ્યુટ, જ્યારે સેટ કરો , ખાતરી કરે છે કે તત્વ પસંદ કરી શકાતું નથી અથવા ખેંચી શકાતું નથી, વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ પર નિયંત્રણનું બીજું સ્તર પ્રદાન કરે છે. આ ખાસ કરીને બટનો અને ટૅબ્સ જેવા અરસપરસ ઘટકો માટે ઉપયોગી થઈ શકે છે જે આકસ્મિક રીતે પ્રકાશિત અથવા ખસેડવા જોઈએ નહીં.
વધુમાં, ધ CSS પ્રોપર્ટીનો ઉપયોગ કરી શકાય છે. સેટિંગ દ્વારા , તમે ઘટકમાંના ટેક્સ્ટને પસંદ ન કરી શકાય તેવું બનાવી શકો છો. જો કે, આ પદ્ધતિ ક્લિક કરવા જેવી અન્ય ક્રિયાપ્રતિક્રિયાઓને પણ નિષ્ક્રિય કરે છે, જે કદાચ તમામ ઉપયોગના કેસ માટે ઇચ્છનીય ન હોય. યોગ્ય પદ્ધતિ પસંદ કરતી વખતે ઉપયોગીતા અને કાર્યક્ષમતાને સંતુલિત કરવી એ ચાવીરૂપ છે.
- હું CSS નો ઉપયોગ કરીને ટેક્સ્ટની પસંદગી કેવી રીતે અટકાવી શકું?
- નો ઉપયોગ કરો મિલકત સુયોજિત ઇચ્છિત તત્વો માટે.
- ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે કોઈ JavaScript પદ્ધતિ છે?
- હા, સેટ કરીને પરત ફરવાની ઘટના લક્ષિત તત્વો પર.
- શું છે મિલકત?
- તે એક CSS પ્રોપર્ટી છે જેનો ઉપયોગ Safari અને Chrome બ્રાઉઝર્સમાં ટેક્સ્ટ સિલેક્શનને અક્ષમ કરવા માટે થાય છે.
- શું હું ઉપયોગ કરી શકું લખાણ પસંદગી અટકાવવા માટે?
- હા, સેટિંગ પ્રતિ ટેક્સ્ટની પસંદગી અટકાવી શકે છે પરંતુ અન્ય ક્રિયાપ્રતિક્રિયાઓને પણ અક્ષમ કરી શકે છે.
- શું કરે છે લક્ષણ કરવું?
- આ વિશેષતા, જ્યારે સેટ કરો , તત્વોને પસંદ થવાથી અથવા ખેંચાતા અટકાવે છે.
- શું CSS વડે બધા બ્રાઉઝર્સને લક્ષ્ય બનાવવાની કોઈ રીત છે?
- નો ઉપયોગ કરો , , , અને user-select ગુણધર્મો એકસાથે.
- શું ટેક્સ્ટ પસંદગીને અક્ષમ કરવા માટે કોઈ ડાઉનસાઇડ્સ છે?
- ટેક્સ્ટ પસંદગીને અક્ષમ કરવાથી ઇન્ટરેક્ટિવ ઘટકો માટે વપરાશકર્તા અનુભવને બહેતર બનાવી શકે છે પરંતુ કેટલાક વપરાશકર્તાઓ માટે ઍક્સેસિબિલિટીમાં અવરોધ આવી શકે છે.
- લખાણ પસંદગી માત્ર ચોક્કસ ઘટકો માટે અક્ષમ કરી શકાય છે?
- હા, તમે ગુણધર્મો અથવા ઇવેન્ટ હેન્ડલર્સને બટનો અથવા ટેબ્સ જેવા વિશિષ્ટ ઘટકો પર લાગુ કરી શકો છો.
- ટેક્સ્ટ સિલેક્શનને અક્ષમ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ કઈ છે?
- ક્રોસ-બ્રાઉઝર સુસંગતતા માટે CSS અને JavaScript પદ્ધતિઓનું સંયોજન કરો અને ખાતરી કરો કે ઉપયોગિતા સાથે ચેડા ન થાય.
ટેક્સ્ટ સિલેક્શન હાઇલાઇટિંગ અટકાવવાથી ઇન્ટરેક્ટિવ વેબ એલિમેન્ટ્સની ઉપયોગીતા વધે છે. જેમ કે CSS ગુણધર્મોનો ઉપયોગ બ્રાઉઝર-વિશિષ્ટ ઉપસર્ગો સાથે તમામ મુખ્ય બ્રાઉઝર્સમાં સુસંગતતા સુનિશ્ચિત કરે છે. વધુમાં, ટેક્સ્ટ સિલેક્શનને મેનેજ કરવા માટે JavaScriptનો સમાવેશ એક મજબૂત ઉકેલ પૂરો પાડે છે. જ્યારે યોગ્ય રીતે અમલમાં મૂકવામાં આવે છે, ત્યારે આ તકનીકો બટનો અથવા ટેબ તરીકે કાર્ય કરતા તત્વોમાં આકસ્મિક ટેક્સ્ટ પસંદગીને અટકાવીને વપરાશકર્તા અનુભવને સુધારે છે, અનિચ્છનીય હાઇલાઇટિંગ વિના સરળ ક્રિયાપ્રતિક્રિયાને સુનિશ્ચિત કરે છે.