How do I determine the character in the textbox that was clicked on?
I can set up an event listener to tell me when a mouse click has occurred somewhere in the HTML document. But if the click occurred in some text, I need to know which character in the text was clicked. Is there a way to do this?
I can think of some really nasty solutions. For example, for each individual character in the document, I could wrap it in a separate element with its own event. Or, since I can indicate which text ad the click was in, I could do some sort of calculation (basically almost like simulating text rendering), perhaps using clientWidth to determine which character was clicked on.
Does it really have to be easier?
source to share
Once the mouse event is captured, split the text in the element into two separate spans. Look at the offset of each range to determine which event occurred. Now divide this range by two and compare again. Repeat until you have a spacing that has one character whose coordinates contain the coordinates of the mouse click. Since this is essentially a binary search, this whole process will be quite fast and the total hops are lower compared to the alternative. After the symbol is found, the spans can be disbanded and all text is returned to the original element.
source to share
You unfortunately have to wrap each character in an element, but you don't need to attach an event listener to each one. When an event is click
fired on an element, it is inflated to its parents. Then you can get the element that was actually clicked using the target
event property .
Let's say we have text in an element named textElement
. It contains span
for each character. If we want to be able to click on characters to remove them, we could use this code:
textElement.addEventListener('click', function(e) {
textElement.removeChild(e.target);
}, false);
source to share
The placement of each character in the document model object is not as unpleasant as it sounds. HTML parsing, DOM presentation, and event handling are fairly memory and handling efficient in modern browsers. A similar mechanism is used at a low level to render symbols. It takes a lot of work to mimic what the browser does at this level.
- Most documents are built with variable width characters
- The wrapper can be justified or aligned in several ways.
- There is no mapping between characters and bytes.
- To be a truly internationalized and reliable solution, surrogate pairs must also be supported 1
This example is lightweight, loads quickly, and is portable across common browsers. Its elegance is not immediately apparent, but greater reliability is achieved by establishing individual correspondences between international symbols and event listeners.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Character Click Demo</title>
<script type='text/javascript'>
var pre = "<div onclick='charClick(this, ";
var inf = ")'>";
var suf = "</div>";
function charClick(el, i) {
var p = el.parentNode.id;
var s = "para '" + p + "' idx " + i + " click";
ele = document.getElementById('result');
ele.innerHTML = s; }
function initCharClick(ids) {
var el; var from; var length; var to; var cc;
var idArray = ids.split(" ");
var idQty = idArray.length;
for (var j = 0; j < idQty; ++ j) {
el = document.getElementById(idArray[j]);
from = unescape(el.innerHTML);
length = from.length;
to = "";
for (var i = 0; i < length; ++ i) {
cc = from.charAt(i);
to = to + pre + i + inf + cc + suf; }
el.innerHTML = to; } }
</script>
<style>
.characters div {
padding: 0;
margin: 0;
display: inline }
</style>
</head>
<body class='characters' onload='initCharClick("h1 p0 p2")'>
<h1 id='h1'>Character Click Demo</h1>
<p id='p0'>æ€ – ࿗Ø —</p>
<p id='p1'>Next π· πE para.</p>
<p id='p2'>© 2017</p>
<hr>
<p id='result'> </p>
</body>
</html>
[1] This simple example does not have surrogate pairs handling, but one can be added to the body of the i loop.
source to share