ການໂຕ້ຕອບ

ການເລືອກຂໍ້ຄວາມ

ປ່ຽນວິທີທີ່ເນື້ອຫາຖືກເລືອກເມື່ອຜູ້ໃຊ້ພົວພັນກັບມັນ.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

ຕົວຊີ້ເຫດການ

Bootstrap ສະຫນອງ .pe-noneແລະ .pe-autoຫ້ອງຮຽນເພື່ອປ້ອງກັນຫຼືເພີ່ມປະຕິສໍາພັນອົງປະກອບ.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

ຫ້ອງ .pe-noneຮຽນ (ແລະ pointer-eventsຄຸນສົມບັດ CSS ທີ່ມັນກໍານົດ) ພຽງແຕ່ປ້ອງກັນການໂຕ້ຕອບກັບຕົວຊີ້ (ຫນູ, stylus, ສໍາຜັດ). ການເຊື່ອມຕໍ່ແລະການຄວບຄຸມທີ່ .pe-noneມີ, ໂດຍຄ່າເລີ່ມຕົ້ນ, ຍັງສາມາດສຸມໃສ່ແລະປະຕິບັດໄດ້ສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ. ເພື່ອຮັບປະກັນວ່າພວກມັນຖືກເຮັດໃຫ້ເປັນກາງຢ່າງສົມບູນເຖິງແມ່ນວ່າສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ, ທ່ານອາດຈະຕ້ອງເພີ່ມຄຸນລັກສະນະເພີ່ມເຕີມເຊັ່ນ: tabindex="-1"(ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການເນັ້ນໃສ່ແປ້ນພິມ) ແລະ aria-disabled="true"(ເພື່ອສະແດງຄວາມຈິງທີ່ວ່າພວກເຂົາຖືກປິດການໃຊ້ງານຢ່າງມີປະສິດທິພາບກັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ), ແລະອາດຈະໃຊ້ JavaScript ເພື່ອ ປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາປະຕິບັດໄດ້ຢ່າງສົມບູນ.

ຖ້າເປັນໄປໄດ້, ການແກ້ໄຂທີ່ງ່າຍດາຍກວ່າແມ່ນ:

• ສໍາລັບການຄວບຄຸມແບບຟອມ, ເພີ່ມ disabledຄຸນລັກສະນະ HTML.

• ສໍາລັບການເຊື່ອມຕໍ່, ເອົາ hrefຄຸນລັກສະນະອອກ, ເຮັດໃຫ້ມັນເປັນຈຸດເຊື່ອມຕໍ່ທີ່ບໍ່ມີການໂຕ້ຕອບຫຼືຕົວຍຶດ.

ຊາສ

Utilities API

ຜົນປະໂຫຍດປະຕິສໍາພັນໄດ້ຖືກປະກາດຢູ່ໃນ API ຜົນປະໂຫຍດຂອງພວກເຮົາໃນ scss/_utilities.scss. ຮຽນຮູ້ວິທີການນໍາໃຊ້ API ຜົນປະໂຫຍດ.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),