1

When making a hex viewer, it does not make sense to let the user select a half of a byte, so I'm trying to force the selection to snap to byte boundaries.

In CSS, I could set user-select to all, but that makes it very difficult to select more than one byte, because clicking inside the element and moving your mouse starts a drag operation instead of selection.

I could try doing it via JS, but all of selection API seems to be marked as experimental technology, and its behavior differs across browsers. I.e. trying to use addRange to extend range in Chrome does nothing, and prints a warning in console linking to this document.

Is there a reliable way to do this in CSS/JS?

riv
  • 6,846
  • 2
  • 34
  • 63
  • Can you use a ` – ibrahim mahrir Sep 06 '18 at 14:08
  • 1
    Why not have bytes as individual elements and create an click listener to get the clicked byte's text value? – Adam Sep 06 '18 at 14:10
  • Is something like this useful? http://jsfiddle.net/dfbzLq73/ – ibrahim mahrir Sep 06 '18 at 14:22
  • 1
    @ibrahimmahrir that looks cool for textareas, but I have bytes as individual elements (so I can add visual gaps between them without changing contents) and having thousands of textareas is probably more taxing on performance than thousands of spans. Although it looks like I will have to switch to canvas anyway, because viewing more than ~10K worth of data kills the browser (virtual scrolling would also work, but it's a HUGE pain to get selection to work in those). – riv Sep 08 '18 at 00:04
  • Not sure if I need to provide an example for when it's just a bunch of spans with 2 characters each. – riv Sep 08 '18 at 00:09
  • @riv Ah, I see! Good luck then! ;-) – ibrahim mahrir Sep 08 '18 at 00:11

0 Answers0