How can I trigger an event when I hold a word in a text?

ionic-v1
1

Hi guys,

I want to trigger an event when I hold a word in a text. How can I do that?
Thank you.

2

What do you mean by ‘hold a word’?

3

Sorry, I mean I want to build an app that will contain some text and when I touch a word for few milliseconds I want to show a popup or something like that.

4

Hey, do not know if this is supported by mobile browsers:
http://www.w3schools.com/jsref/event_onselect.asp

5

Markup

<div id="myId">
    <p on-hold="showpopup()">Some Content</p>
</div>

Controller

$scope.showpopup = function(){
  // 
}

or

$scope.on('on-hold', functionName, "myId");
2 Likes
6

the ionic on-hold is something like - i am doing a touchstart or mousedown and hold it.

If you want to handle the selected text you can combine both.

7

Remove the link to w3schools. Use the standard Mozilla Docs.

Have a look at http://www.w3fools.com/

8

yeah but mozilla docs holds the standards for mozilla and everything around it (web engine and so on).

But you have to no if this stuff is supported by other browsers and so on… thatswhy w3school :wink:

9

Thank you all,

siddhartha this works partially, I need to get the word that I hold in the text.
How can I get the word I touched?

10

If you have a large paragraph and want to fire on-hold event on just a few words then:
Markup:

  <div id="myDiv">
      There are places I <span>remember</span> all my life,
      though some have changed... All these places had their
      <span>moments</span> with lovers and friends I
      still can <span>recall</span>. Some are dead and 
      some are living. In my <span>life</span> I loved them all.
    </div>

Javascript:

<script>
    
    var div = document.getElementById("myDiv");
    var arrayOfNodes = Array.prototype.slice.call(div.childNodes, 0);
    
    arrayOfNodes.forEach(function(item, index, array){
      item.addEventListener("click", function(){
        alert(item.innerHTML)
       // Code for your popup
      // Replace click event with on-hold. This is vanilla JS so 
      // I have stuck with click.
      });
    });
    
</script>

This is just a quick solution. Guys like @mhartington @bengtler can give you a better quicker solution.

11

I do not know where your texts come from. If they are fix and you can not change them… it will be hard.
And should this on-hold be possible on each word like ‘is’ ‘where’ or only on buzzwords?

if it must be generic you have to you should have a look at “document.selection”.

If you only provide this on buzzwords and you are the provider of the texts -> put the buzzwords in span-tags -> add ng-click or ng-hold there and add parameter to identify the buzzword.

Greetz, bengtler

12

That is the point…
It must be generic and I have not buzzwords!
I will get the text dynamic via json.
:wink: