Emphasize the letter by pressing the shift key along with either the left arrow

When the right and left arrow keys are pressed, my HTML element currently only highlights the next letter when the shift key is also pressed. How can I modify it to highlight all the letters in the word when the shift key and the right or left arrow keys are pressed simultaneously? Thank you.

Here is my current code snippet:

angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(scope) {
  scope.keyPress = function(){
     var code = event.which;
      if (code == 37) {
        document.activeElement.selectionEnd--;
          var test = false;
         if(test == false){
        //  document.activeElement.selectionStart--;
          document.activeElement.selectionEnd--;
          if(document.activeElement.selectionStart == 0){
             test = true;
             document.activeElement.selectionEnd = 0;
             document.activeElement.selectionStart = 0;
          }
    }
        if (code == 39) {
            event.preventDefault();
            document.activeElement.selectionStart++;
            //document.activeElement.selectionEnd++;

        }
  }
}]);


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
   <textarea name="text" unselectable="on" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>

My attempted solution is below:

 if (event.shiftKey) {
                //eval("scope." + callFun + "();");
                console.log('shiftKey Pressed');

         if (code == 37) {
              console.log('arrow Pressed');
        }

        if (code == 39) {
              console.log('arrow Pressed');
              document.activeElement.selectionStart == 0;
                 document.activeElement.selectionStart++;
              document.activeElement.selectionEnd++;
        }


            }

Answer №1

Query:

How can I ensure that all letters are highlighted simultaneously when both the shift and right or left arrow keys are pressed?

Solution:

  if (code == 39 && event.shiftKey) {
    event.preventDefault();
    document.activeElement.selectionStart = 0;
    document.activeElement.selectionEnd = document.activeElement.textLength;
  }

This code snippet will successfully select all the letters when the shift and left arrow keys are pressed simultaneously. See it in action:

https://codepen.io/anon/pen/eEmpQM?editors=1011

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

function name cannot be invoked correctly in JavaScript

I am facing an issue with calling my javascript function correctly when I click on it (show_more_in_month_0/1/2). Below is my current code: $i = 0; foreach ($data as $row){ echo '<td><span class="glyphicon-plus show_more_in_mont_'. ...

Display the contents in a textarea with modal, not as a string

I'm currently working on implementing a modal overlay window with simplemodal that will display the contents of a text area. My goal is to show the rendered output rather than just the string value. For example, if a user enters HTML or includes an im ...

Learn how to mock $resource in AngularJS using $promise.then in your jasmine tests

I have a factory that utilizes Angular resource to fetch data from an API. I've developed a function called getObjectById within the service, which uses the factory to request a specific object by ID, then adjusts the object before returning it. Serv ...

Is there a way to adjust the parameters of objects within my scene that were loaded using OBJMTLLoader?

I am working on a scene that includes 3 cubes and a DAT.GUI menu. My goal is to switch any cube to wireframe mode when it is selected in the menu individually. Although my code is successful for 2 out of the 3 cubes, I am facing an issue where the first c ...

Steps for deactivating a button based on the list's size

I am trying to implement a feature where the user can select only one tag. Once the user has added a tag to the list, I want the button to be disabled. My approach was to disable the button if the length of the list is greater than 0, but it doesn't s ...

Is it possible for Angular.js to access a server session attribute?

I am in the process of creating an authentication system with angular.js My goal is to implement a session timeout after a period of inactivity and expire the current session if a user logs in from another device. In both scenarios - 1) idle timeout and ...

Determine the position and quantity of elements in jQuery by comparing their IDs with the current page or element

Looking to retrieve the n (zero based) position of an element by matching the page and element ID... Let's use an example (Assume the current page ID is 488); <ul id="work-grid"> <li id="item-486" class="work-item"><!--/content--& ...

Is there a bug in NodeJS that causes an error when a return statement is used with a line feed before the string to be returned?

I am attempting to call a function from a module in order to generate an HTML string. When the function is written with a line feed (LF) between the return statement and the string declaration as shown below, the return value becomes "undefined"... export ...

Using jQuery for Dragging and Dropping Elements within Dynamically Loaded Divs with

Is it possible to drag an element on the page into a droppable element inside an ajax loaded div? The code works fine when the droppable element is placed directly in the regular page, but not within the ajax loaded div. It seems like the issue may be rela ...

The module could not be found because there was an error: Unable to locate '@mui/icons-material/AddCircle', despite the fact that @mui/icons-material has been installed

When working with the IR compiler in Kotlin JS, I encountered an issue. The error message reads: Module not found: Error: Can't resolve '@mui/icons-material/AddCircle' Even though @mui/icons-material is already installed, the error persist ...

Having trouble transferring data between Vue.JS components

Wondering how to pass data from the parent component (Home route) to the child component (playlist route) using props? Encountering a "TypeError: Cannot read property 'length' of undefined" error in the child component? These two components are c ...

Exercises from the Shader Scriptures

This winter break, I have dedicated my time to delving into the world of shaders. I am currently faced with a challenging exercise: y = sin(x); Explore the exercises below and observe the results: Introduce time (u_time) into the equation before calcul ...

Is there a way to retrieve the data selected in my modal window when a button is clicked, depending on the v-for value?

As someone who is new to Vue and utilizing Bootstrap modals to showcase product information, I have grid containers that contain a product image, description, and two buttons. One of the buttons, labeled More details >>, is intended to trigger a moda ...

Having the ng-controller placed on the same element as ng-repeat will result in one-way data binding only

I'm having trouble with two-way data binding in an AngularJS ng-repeat. I've set up an ng-controller on the same element as the ng-repeat, which allows me to access each item being iterated over. Here's the HTML: <div ng-controller="Othe ...

How can you select a variable using Jquery?

$.get('sampleurl.com',function(result){ target = $(result #specificID).attr("href") // Can someone help me with this??? }) I fetch content from an external website using $.get and store it in the result variable, now I'm trying to figure ou ...

Tips on incorporating JavaScript files into Angular applications

Struggling to incorporate a JavaScript function into Angular, I have installed the plugin "npm I global payments-3ds". I copied the JavaScript files from node_modules and attempted to call them in my component. Below is an example: import { ...

Is the presence of the selenium webdriver being registered?

Is there a method to detect if a website can tell I am using a bot while running Selenium WebDriver in Python or Puppeteer in JavaScript? Are there any resources that indicate whether a bot test would be failed, such as Cloudflare or Captcha? Appreciate a ...

Retrieving the checkbox value from a dropdown selection

I'm stuck and feeling lost here - I must be missing something obvious. Any help will be greatly appreciated! (I am a beginner in html and javascript) I have created a dropdown menu with an unordered list of items populated from JSON data. Here is the ...

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

Image-switching button

I'm new to JavaScript and struggling with my first code. I've been staring at it for two days now, but can't figure out what's wrong. The goal is to create an HTML page where the user can change an image by clicking on a button, and th ...