ਅਣਚਾਹੇ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਰੋਕਣਾ
ਐਂਕਰਾਂ ਲਈ ਜੋ ਬਟਨਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਸਟੈਕ ਓਵਰਫਲੋ ਸਾਈਡਬਾਰ (ਸਵਾਲ, ਟੈਗਸ ਅਤੇ ਉਪਭੋਗਤਾ) 'ਤੇ, ਇਹ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਗਲਤੀ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦੇ ਹਨ। ਇਹ ਅਕਸਰ ਉਦੋਂ ਵਾਪਰਦਾ ਹੈ ਜਦੋਂ ਇਹ ਤੱਤ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਕਿਰਿਆਵਾਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਜਿੱਥੇ ਟੈਕਸਟ ਦੀ ਚੋਣ ਅਣਇੱਛਤ ਹੁੰਦੀ ਹੈ।
ਜਦੋਂ ਕਿ JavaScript ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਰੋਕਣ ਲਈ ਹੱਲ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਇਹ ਜਾਣਨਾ ਲਾਹੇਵੰਦ ਹੈ ਕਿ ਕੀ CSS ਇੱਕ ਮਿਆਰੀ-ਅਨੁਕੂਲ ਢੰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਲੇਖ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਟੈਕਸਟ ਚੋਣ ਹਾਈਲਾਈਟਿੰਗ ਨੂੰ ਕਿਵੇਂ ਅਸਮਰੱਥ ਬਣਾਉਣਾ ਹੈ ਅਤੇ ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਚਰਚਾ ਕਰਦਾ ਹੈ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| -webkit-user-select | ਸਫਾਰੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ CSS ਵਿਸ਼ੇਸ਼ਤਾ। |
| -moz-user-select | ਫਾਇਰਫਾਕਸ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ CSS ਵਿਸ਼ੇਸ਼ਤਾ। |
| -ms-user-select | ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10+ ਵਿੱਚ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ CSS ਵਿਸ਼ੇਸ਼ਤਾ। |
| user-select | ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਮਿਆਰੀ CSS ਵਿਸ਼ੇਸ਼ਤਾ। |
| onselectstart | ਕਿਸੇ ਤੱਤ 'ਤੇ ਟੈਕਸਟ ਦੀ ਚੋਣ ਨੂੰ ਰੋਕਣ ਲਈ JavaScript ਇਵੈਂਟ ਹੈਂਡਲਰ। |
| querySelectorAll | ਚੋਣਕਾਰਾਂ ਦੇ ਇੱਕ ਨਿਸ਼ਚਿਤ ਸਮੂਹ ਨਾਲ ਮੇਲ ਖਾਂਦੀਆਂ ਸਾਰੀਆਂ ਤੱਤਾਂ ਨੂੰ ਚੁਣਨ ਲਈ JavaScript ਵਿਧੀ। |
ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਸਮਝਣਾ
CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਟੈਕਸਟ ਚੋਣ ਹਾਈਲਾਈਟਿੰਗ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ, ਅਸੀਂ ਲਾਗੂ ਕਰਦੇ ਹਾਂ -webkit-user-select, -moz-user-select, -ms-user-select, ਅਤੇ user-select ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦੀਆਂ ਹਨ, ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੈੱਟ ਕਰਕੇ none, ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਐਲੀਮੈਂਟਸ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ no-select ਕਲਾਸ.
JavaScript ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਜੋੜਦੇ ਹਾਂ ਜੋ DOM ਸਮੱਗਰੀ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਦ querySelectorAll ਵਿਧੀ ਨਾਲ ਸਾਰੇ ਤੱਤ ਚੁਣਦਾ ਹੈ no-select ਕਲਾਸ. ਹਰੇਕ ਚੁਣੇ ਹੋਏ ਤੱਤ ਲਈ, onselectstart ਘਟਨਾ ਨੂੰ ਵਾਪਸ ਕਰਨ ਲਈ ਓਵਰਰਾਈਡ ਕੀਤਾ ਗਿਆ ਹੈ 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 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>
ਹੋਰ ਹੱਲਾਂ ਦੀ ਪੜਚੋਲ ਕਰ ਰਿਹਾ ਹੈ
ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਟੈਕਸਟ ਦੀ ਚੋਣ ਨੂੰ ਰੋਕਣ ਲਈ ਇੱਕ ਹੋਰ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੀ ਹੈ draggable HTML ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ. ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ, ਜਦੋਂ ਸੈੱਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ false, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੱਤ ਨੂੰ ਚੁਣਿਆ ਜਾਂ ਖਿੱਚਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ ਹੈ, ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ 'ਤੇ ਨਿਯੰਤਰਣ ਦੀ ਇੱਕ ਹੋਰ ਪਰਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਬਟਨਾਂ ਅਤੇ ਟੈਬਾਂ ਵਰਗੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਉਜਾਗਰ ਨਹੀਂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਜਾਂ ਗਲਤੀ ਨਾਲ ਹਿਲਾਇਆ ਨਹੀਂ ਜਾਣਾ ਚਾਹੀਦਾ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਦ pointer-events CSS ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਸੈੱਟ ਕਰਕੇ pointer-events: none, ਤੁਸੀਂ ਇੱਕ ਐਲੀਮੈਂਟ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਅਣਚੋਣਯੋਗ ਬਣਾ ਸਕਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਇਹ ਵਿਧੀ ਹੋਰ ਪਰਸਪਰ ਕ੍ਰਿਆਵਾਂ ਨੂੰ ਵੀ ਅਸਮਰੱਥ ਬਣਾਉਂਦੀ ਹੈ ਜਿਵੇਂ ਕਿ ਕਲਿੱਕ ਕਰਨਾ, ਜੋ ਕਿ ਵਰਤੋਂ ਦੇ ਸਾਰੇ ਮਾਮਲਿਆਂ ਲਈ ਫਾਇਦੇਮੰਦ ਨਹੀਂ ਹੋ ਸਕਦਾ ਹੈ। ਸਹੀ ਢੰਗ ਦੀ ਚੋਣ ਕਰਦੇ ਸਮੇਂ ਉਪਯੋਗਤਾ ਅਤੇ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।
ਆਮ ਸਵਾਲ ਅਤੇ ਹੱਲ
- ਮੈਂ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਕਿਵੇਂ ਰੋਕ ਸਕਦਾ ਹਾਂ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ user-select ਸੰਪਤੀ ਨੂੰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ none ਲੋੜੀਂਦੇ ਤੱਤਾਂ ਲਈ.
- ਕੀ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕੋਈ JavaScript ਵਿਧੀ ਹੈ?
- ਹਾਂ, ਸੈੱਟ ਕਰਕੇ onselectstart ਵਾਪਸੀ ਲਈ ਘਟਨਾ false ਨਿਸ਼ਾਨਾ ਤੱਤ 'ਤੇ.
- ਕੀ ਹੁੰਦਾ ਹੈ -webkit-user-select ਜਾਇਦਾਦ?
- ਇਹ ਸਫਾਰੀ ਅਤੇ ਕਰੋਮ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਇੱਕ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।
- ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ pointer-events ਪਾਠ ਚੋਣ ਨੂੰ ਰੋਕਣ ਲਈ?
- ਹਾਂ, ਸੈਟਿੰਗ pointer-events ਨੂੰ none ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ ਪਰ ਹੋਰ ਪਰਸਪਰ ਕ੍ਰਿਆਵਾਂ ਨੂੰ ਵੀ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
- ਕੀ ਕਰਦਾ ਹੈ draggable ਗੁਣ ਕਰਦੇ ਹਨ?
- ਦ draggable ਵਿਸ਼ੇਸ਼ਤਾ, ਜਦੋਂ ਸੈੱਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ false, ਤੱਤਾਂ ਨੂੰ ਚੁਣੇ ਜਾਂ ਘਸੀਟਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
- ਕੀ CSS ਨਾਲ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦਾ ਕੋਈ ਤਰੀਕਾ ਹੈ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ -webkit-user-select, -moz-user-select, -ms-user-select, ਅਤੇ user-select ਗੁਣ ਇਕੱਠੇ.
- ਕੀ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਕੋਈ ਨਨੁਕਸਾਨ ਹਨ?
- ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਲਈ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਿੱਚ ਸੁਧਾਰ ਹੋ ਸਕਦਾ ਹੈ ਪਰ ਕੁਝ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਵਿੱਚ ਰੁਕਾਵਟ ਆ ਸਕਦੀ ਹੈ।
- ਕੀ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਸਿਰਫ਼ ਖਾਸ ਤੱਤਾਂ ਲਈ ਅਯੋਗ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ?
- ਹਾਂ, ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਤੱਤਾਂ ਜਿਵੇਂ ਕਿ ਬਟਨਾਂ ਜਾਂ ਟੈਬਾਂ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਜਾਂ ਇਵੈਂਟ ਹੈਂਡਲਰ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।
- ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਕੀ ਹਨ?
- ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ CSS ਅਤੇ JavaScript ਵਿਧੀਆਂ ਨੂੰ ਜੋੜੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਪਯੋਗਤਾ ਨਾਲ ਸਮਝੌਤਾ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ।
ਪਾਠ ਚੋਣ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਬਾਰੇ ਅੰਤਿਮ ਵਿਚਾਰ
ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਨ ਤੋਂ ਰੋਕਣਾ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਲੀਮੈਂਟਸ ਦੀ ਉਪਯੋਗਤਾ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਿਵੇਂ ਕਿ user-select ਬ੍ਰਾਊਜ਼ਰ-ਵਿਸ਼ੇਸ਼ ਪ੍ਰੀਫਿਕਸ ਦੇ ਨਾਲ ਸਾਰੇ ਪ੍ਰਮੁੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਅਨੁਕੂਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਟੈਕਸਟ ਦੀ ਚੋਣ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ JavaScript ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਇੱਕ ਮਜ਼ਬੂਤ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਤਕਨੀਕਾਂ ਅਣਚਾਹੇ ਹਾਈਲਾਈਟਿੰਗ ਤੋਂ ਬਿਨਾਂ ਨਿਰਵਿਘਨ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ, ਬਟਨਾਂ ਜਾਂ ਟੈਬਾਂ ਦੇ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਤੱਤਾਂ ਵਿੱਚ ਅਚਾਨਕ ਟੈਕਸਟ ਚੋਣ ਨੂੰ ਰੋਕ ਕੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀਆਂ ਹਨ।