Finding the current cursor position in a Shiny textareaInput

Is there a way to determine the cursor position within a textAreaInput in a shiny application?

library(shiny)

ui <- fluidPage(
  textAreaInput("hop"
                ,label="textarea",value = "Supercalifragilisticexpialidocious"),
  verbatimTextOutput("out")
)

server <- function(input, output, session) {

  output$out <- renderText({
    "I am looking to retrieve the cursor position (an integer?) \n inside the textArea field"

  })

}

shinyApp(ui, server)

I believe utilizing JavaScript may be necessary, but I'm unsure of where to begin.

Best regards,

javascriptrshiny

Answer №1

Below is a solution I came across:

library(shiny)

ui <- fluidPage(tags$head(tags$script(
  'Shiny.addCustomMessageHandler("prout",
  function(NULL) {

   var ctl = document.getElementById("hop");
    var startPos = ctl.selectionStart;
  var endPos = ctl.selectionEnd;
  alert(startPos + ", " + endPos);

  });'
    )),
  textAreaInput("hop"
                ,label="textarea",value = "Supercalifragilisticexpialidocious"),
  verbatimTextOutput("out"),
  actionButton("hop","hop")
)

server <- function(input, output, session) {

  output$out <- renderText({
    "I aim to retrieve the cursor position (an integer?) inside the textArea."

  })

  observeEvent(input$hop,{
    message("hop")
    session$sendCustomMessage(type="prout",message=list(NULL))
  })
}

shinyApp(ui, server)

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

Can you explain the term used to describe when specific sections of the source code are run during the build process to improve optimization?

One interesting feature I've noticed in next.js is its automatic code optimization during the build process. This means that instead of running the code every time the app is executed, it's evaluated and executed only once during the build. For ...

javascriptoptimizationnext.jsbuild

Implementing Vue.js functionality to dynamically add or remove values from an array based on the state of a checkbox

I recently embarked on my journey to learn vue.js and I've encountered a challenging issue. I have dynamic data that I render using a 'v-for' loop. Additionally, I have an empty array where I need to store checked checkbox data and remove it ...

javascriptarraysjsonvue.js

Flexbox Resizing Notification(?)

Recently, I've been utilizing flexbox in my layout design and it has been a game-changer. However, I am facing an issue that might be linked to my heavy use of AngularJS, particularly the ng-include feature. The specific problem arises when I incorpo ...

javascripthtmlangularjsflexbox

Mastering Data Labels in ng2-chart: A step-by-step guide

Once again, I find myself battling my Angular and JavaScript challenges, each question making me feel a little less intelligent. Let me walk you through how I got here. In my most recent project, I wanted to enhance the user experience by incorporating sl ...

javascriptangularng2-charts

What is the correct way to utilize the onclick() method while passing specific variables, such as an ID of a Mongoose Object Document, as arguments?

As I dynamically add rows to a front-end table based on data from a custom node.js API, each row represents a student with fields for Name, Class, Roll_No, and a button that changes color based on the student's specific value. The button code looks li ...

javascriptjquerynode.jsmongodb

Enable/Disable Text Editing Based on Vue Js Input

I’m working on a way to make certain parts of a string in an input editable or non-editable (readonly) depending on the context in Vue.js. For instance: I have this text: My Name is $John Doe$ Now, I want my Vue.js code to scan the string and allow edi ...

javascriptvue.jsvuejs2

Strategies for navigating dynamic references in Angular 2 components

I am working with elements inside an ngFor loop. Each element is given a reference like #f{{floor}}b. The variable floor is used for this reference. My goal is to pass these elements to a function. Here is the code snippet: <button #f{{floor}}b (click) ...

javascriptangulartypescript

Incorporating Chartist.JS with Jade-syntax pages

Hello everyone, I need some assistance with integrating Chartist.JS into a node Template to display a basic bar graph. The script doesn't seem to be working properly and I'm unsure of what's causing the issue. Can anyone please take a look a ...

javascriptnode.jsexpresspugchartist.js

Having trouble getting the Babel plugin transform-remove-console to function properly with the Vue CLI 4 and @vue/cli-plugin-babel/preset?

When you create a VueJS project using Vue CLI 4, Babel is configured with a useful preset in babel.config.js: module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], }; I am attempting to use babel-plugin-transform-remove-conso ...

javascriptvue.jswebpackbabeljsvue-cli

What are the methods for handling JSON type in a web server?

Hey there! I'm currently working on making an AJAX call from the browser to a web service. The data is being sent as JSON from the browser to the web service. I'm wondering if there is a different way to retrieve it as a string and then deseriali ...

javascriptasp.netajaxweb-services

JavaScript function is not being invoked when receiving PHP arguments

When using the < a > tag in php, I encountered an issue where passing an argument in a JavaScript function did not result in the function being called. However, if I passed empty arguments, the function was executed. Here is the JavaScript code: fu ...

phpjavascriptarguments

JavaScript function for searching YouTube videos

While browsing on stackoverflow, I came across the following code snippet: $(document).ready(function () { $("#show").click(function () { getYoutube($("#Search").val()); }); }); function getYoutube(title) { $.ajax({ type: "GET", url: yt_url ...

javascriptajaxyoutube

Utilizing vanilla JavaScript or ES6 to extract data from a JSON file

I am currently working on an HTML project where I need to extract data from a JSON file that cannot be modified. I am looking to accomplish this using pure JavaScript or ES6, but I am struggling to make it work. Specifically, I am trying to retrieve a link ...

javascripthtmljsonecmascript-6

Testing for expressjs 4 using Mocha revealed unexpected behavior when attempting to spy on a function called within a promise. Despite setting up the

I have encountered a situation with some test cases structured like this: it('does stuff', function(done) { somePromise.then(function () { expect(someSpy).to.have.been.called done() }) }) When the assertion in a test case fails, it ...

javascriptnode.jsexpresspromisemocha.js

The map failed to display any information

<div> {!props.isLoading && <div> {normalizedData.map((outerObj,index) => { { <p className="space_name"> {outerObj.space_name} </p> ...

javascriptreactjs

Can someone explain the integration of socket.io and express in a simple way?

I am encountering an issue with socket.io emit and express. My goal is to emit data for a web game, specifically to send players data to a specific lobby. For instance, if I create a lobby at the following link: localhost:8000/test/lobbyName, I want to emi ...

javascriptnode.jsexpresssocket.io

Manipulating objects with Jade Mixin

My current challenge involves programmatically displaying objects within a jade template by passing an array of objects to the view. The aim is to present these objects in a grid view with up to 3 items per row. However, I encountered an issue where nested ...

javascriptnode.jspugmixins

React Scheduler by Bryntum

After successfully discovering some functions related to various actions, I find myself still in need of additional functions: Currently, I am utilizing these functions by passing them directly as props to the Scheduler React Component: - onBeforeEventSa ...

javascriptreactjstypescriptbryntum-scheduler

Issue: Module 'connect' is not found?

Hey there! I'm fairly new to the world of servers, and I've been learning by watching YouTube tutorials. Following one such tutorial, I installed 'connect' using npm in my project folder. Here's the structure of my project: serv ...

javascriptnode.jsserver

The setTimeout function appears to be malfunctioning

I've encountered an issue where a webpage keeps scrolling endlessly without stopping. I've attempted to terminate it by using the exit function, but unfortunately it's not working. Does anyone have a solution for this problem? ...

javascriptsettimeout