p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() #1814

Gatunox · 2017-02-19T21:07:58Z

I've tried to use p5.Element::mousePressed() in order to call a funtion that uses HTMLElement::setSelectionRange() to select a range within a TextArea, but it does not work.

I am new to p5.js so I posted a question on the forum. Luckly GoToLoop answer it and he was able to verify that it seems to be failing. He suggested to replace mousePressed() to some other event as a workarround.

I end up using mouseClicked() and it works.

Here is my code that is not working.
If you click on "Select cup it works, It selects "Cup" on the textarea.
If you click on Parse Content it does print "hello" on the console. but there is no selection on the textarea.

index.html

<html>
<head>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="libraries/p5.js"> </script>
    <script type='text/javascript' src='libraries/p5.dom.js'></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>

<body>
    <h1>Message Parser</h1>
    <p>DDL definition to use:</p>
    <input type="button" value="Select cup" onmousedown="selectCup(); return  false">
    <textarea type="textarea" id="result">Cup of tea</textarea>
</body>
</html>

sketch.js

var button_parse;
 
function parse_pressed(){
    // do some validations....and selecte what needs to be highlited
    // call function to highlight
    selectCup();
};
 
function setup() {
    noCanvas();
    button_parse = createButton('Parse Content');
    button_parse.mousePressed(parse_pressed);
};

function selectCup() {
    console.log('hello');
    var input = select("#result");
    input.elt.setSelectionRange(0,3); // Highlights "Cup"
    input.elt.focus();
};

The text was updated successfully, but these errors were encountered:

reijovosu · 2017-02-20T02:31:17Z

Hi,

It seems that this is not so much a p5 problem but JS event bubbling. My guess is that browser is bubbling mousedown event automatically for selection. With click this is more straight forward.

To fix this, you need to stop mousedown event from bubbling. In your example:

<input type="button" value="Select cup" onmousedown="selectCup(); return false;">

You already prevented event from bubbling. When you remove "return false" It stops working.

Here is your working example:

var button_parse;
 
function parse_pressed(e){
    // do some validations....and selecte what needs to be highlited
    // call function to highlight
    e.preventDefault();
    selectCup();
    return false;
};
 
function setup() {
    noCanvas();
    button_parse = createButton('Parse Content');
    button_parse.mousePressed(parse_pressed);
};

function selectCup() {
    console.log('hello');
    var input = select("#result");
    input.elt.setSelectionRange(0,3); // Highlights "Cup"
    input.elt.focus();
};

reijovosu · 2017-02-21T19:28:50Z

@lmccart No this will break. selectCup function is out of event scope. And not returned back to event.

lmccart · 2017-02-21T19:32:32Z

oops thanks! I was misreading the flow of the original code. @feedzh you are correct, please disregard my snippet and go with one of the options posted. removing it now..

reijovosu · 2017-02-21T19:33:52Z

np. Happens with best of us :P

Gatunox changed the title ~~p5.Element::mousePressed()'s callback fails use HTMLElement::setSelectionRange()~~ p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() Feb 19, 2017

lmccart closed this as completed Feb 21, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() #1814

p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() #1814

Gatunox commented Feb 19, 2017 •

edited

reijovosu commented Feb 20, 2017

reijovosu commented Feb 21, 2017

lmccart commented Feb 21, 2017

reijovosu commented Feb 21, 2017

p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() #1814

p5.Element::mousePressed()'s callback fails to use HTMLElement::setSelectionRange() #1814

Comments

Gatunox commented Feb 19, 2017 • edited

reijovosu commented Feb 20, 2017

reijovosu commented Feb 21, 2017

lmccart commented Feb 21, 2017

reijovosu commented Feb 21, 2017

Gatunox commented Feb 19, 2017 •

edited