Monitoring Selection Updates on Firefox for Android using JavaScript

I am in search of a method to monitor text selections on a webpage. I require code to run every time there is a change in selection. While I have successfully achieved this on the main desktop browsers, I am facing difficulties with Firefox for Android.

I attempted three different methods (all unsuccessful!):

  1. Attempting to capture the "mouseup" event and checking for a non-empty text selection. However, the issue here is that "mouseup" does not trigger if a selection was made during the mousedown-move-up sequence!
  2. Trying the same approach with the "touchend" event - with the same outcome.
  3. Exploring the use of the "selectionchange" event. Upon investigation, I realized that it does not get triggered when the selection changes unless the config key "dom.select_events.enabled" is set. This setting is by default false, which means I cannot expect visitors to modify their browser settings :-)

Moreover, as anticipated, the first two events do not activate if the selection is extended or reduced by dragging the selection start/end markers.

Currently, my only idea is to implement a periodic poller (using setInterval) to verify the presence of a text selection. Unfortunately, this solution is far from ideal and impacts performance negatively.

Any suggestions or guidance would be greatly appreciated.

Answer №1

1) Native Text Selection Events

At the moment, polling appears to be the only workaround in dealing with text selection events. However, there is a glimmer of hope as the selectionchange event has been experimentally integrated into Firefox for Android Nightly. By toggling the dom.select_events.enabled flag to true, you can activate this feature (initially set at false).

In Nightly builds, the flag is already set to true by default, indicating that soon you may be able to utilize this functionality seamlessly within a few months.

 

2) Discovering Functional Events

(NOT YET VERIFIED!!)

Even though onselectstart is currently not fully compatible with Firefox for Android, resorting to periodic checks is your best bet until then.

To enhance efficiency and minimize resource consumption, you can commence polling upon triggering the window's blur event. This approach ensures that when a user engages in selecting text, the focus shifts away from the viewport (testing essential).

window.addEventListener('blur', function(){
    // initiate text selection polling
});

Once the focus reverts back, cease the polling activity.

window.addEventListener('focus', function(){
    // halt polling 
});

For determining browser compatibility with text selection events, deploy the following snippet:

var browserSupportsTextSelectionEvents = function(){
    return !!('onselectstart' in document.body);
}

 

3) Innovative Measures

An alternate method involves deactivating text selection on mobile Firefox through CSS (-moz-user-select: none), creating a bespoke text selection mechanism based on touch position interceptions, and subsequently feeding the selected range back to the browser using HTMLElement.setSelectionRange().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the y-axis range in d3.js and nvd3.js: A complete guide

I'm attempting to define the y-axis range of the chart to be between 1 and 100. After reviewing the API documentation, I came across a potential solution involving axis.tickValues which can be found here: https://github.com/mbostock/d3/wiki/SVG-Axes# ...

Retrieve the parameter values in PHP that were passed from AngularJS

This is my first time working with PHP and AngularJS. I am trying to pass parameters from AngularJS to a PHP file, where they will be used in an INSERT query. I have set up an XMLHttpRequest to call the PHP file (addsubscriber.php?par1=val1&par2=val2) ...

Building the logic context using NodeJS, SocketIO, and Express for development

Exploring the world of Express and SocketIO has been quite an eye-opener for me. It's surprising how most examples you come across simply involve transmitting a "Hello" directly from app.js. However, reality is far more complex than that. I've hi ...

Having trouble with the "Like Button" feature in Tango with Django?

I attempted to follow a tutorial for adding a like button, but unfortunately the like count is not increasing after clicking it. The tutorial can be found at this link. Below is the code I have implemented: views.py def like_post(request): post ...

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Currently, I am facing an issue with an angular bootstrap popover on some text. The problem arises when the user tries to click on a link inside the popover as it disappears. Additionally, when changing from one popover to another, the previous one does no ...

Viewing multiple pages and maintaining sessions in Laravel

I am currently working on a quiz application that involves multiple pages depending on the user's selection. However, I have encountered an issue with Laravel's pagination not saving previous page inputs. Is there a way to resolve this problem? A ...

Retrieve an XML file using JavaScript and store it within a variable

I am currently developing a PhoneGap Application utilizing jQuery Mobile. One of the requirements is to access an xml file stored on a remote server (accessible through a web server like http://www.example.com/myXmlFile.xml). My goal is to extract the cont ...

Calculating totals based on user input using an array as a variable in JavaScript

I am looking to store the total for a specific database object with the id of 3. There are various ids with different values, but in this instance, I am focusing on storing the value of 2. In addition to storing the value, I also want to be able to increm ...

Discovering the accessibility of a website's URL address

I have implemented a method to check the reachability of a URL. public boolean isMyURLReachable(String url){ boolean reachable = false; try { reachable = InetAddress.getByName(url).isReachable(2000); } catch (UnknownHostException e) { ...

Access the value retrieved from a form on the previous page using PHP

I'm struggling with extracting values from radio buttons on a previous page. Currently, my HTML and PHP code works fine with the search bar, which is the first form below. However, I'd like to add radio button filters below the search bar. <s ...

What is the best way to obtain the current time in a specific city?

Is there a simpler way to display the current time for a specific location without having to deal with factors like daylight savings time? I am searching for a more straightforward solution to always show the time for a particular city, zip code, or any o ...

Encountering unfinished SOAP response in Java

Within my project, I am utilizing a web service by sending a SOAP request in the specified format: try { URL u = new URL(server); URLConnection uc = u.openConnection(); HttpURLConnection connection = (HttpURLConnection) uc; c ...

How can I selectively apply a texture to a specific section of a face in Three.js?

I am exploring the idea of creating portals using threejs by sketching an ellipse and then applying a WebGlRenderTarget texture mapping to its face. Currently, I have a function that partially works, but it attempts to stretch the large rectangular buffer ...

Reformat a JSON file and save as a new file

I have a lengthy list of one-level JSON data similar to the example below: json-old.json [ {"stock": "abc", "volume": "45434", "price": "31", "date": "10/12/12"}, {"stock": "abc", "volume": "45435", "price": "30", "date": "10/13/12"}, {"stock": "xyz", "vo ...

Steer clear of manually inputting URLs in your React components

As I embark on my journey with Gatsby, I am noticing a recurring pattern in my code. A prime example is when creating links, where I often find myself doing something like this: import {kebabCase} from "lodash"; // ... <Link to={`tags/${kebabCase( ...

Is it possible to use a += operator with attr() and val() functions in JavaScript?

Ever since I switched to jQuery, my development process has significantly sped up. However, there is one task that has become a bit more time-consuming: appending a string to an attribute or value. For instance, if you wanted to add a letter to the value ...

What could be causing the issue with lodash throttle not functioning correctly in the useWindowSize custom hook?

I'm attempting to implement a resize event with throttle, but I'm encountering an issue. To troubleshoot, I have tried the following: import {throttle} from 'lodash' export function useWindowSize() { const [windowSize, setWindowSize] ...

Update the nested radio button to a new value

I have a series of radio button lists generated using ng-repeat. I've managed to capture the selected item successfully. Now, I am attempting to set the default value for the radio buttons. Could someone please provide assistance? Below is my code sni ...

Type of result from a function that returns a linked promise

In my class, I have a method that returns a chained promise. The first promise's type is angular.IPromise<Foo>, and the second promise resolves with type angular.IPromise<Bar>. I am perplexed as to why the return type of doSomething is an ...

Issue with PendingIntent not being processed properly by BroadcastReceiver

Currently, I am working on an SMS messaging application and facing an issue with the BroadcastReceiver that checks if a message has been sent or not. The problem occurs when I register it in the activity - it works fine there. However, I would like to im ...