Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example.

Here is the HTML structure:

<div class="right-content" id="rc-0" style="height: 250px;">
  <div class="right-cont-main" id="rcm-0" style="height: 250px;">
    <div class="scroll-line" id="sl-0" style="height: 250px;">
      <div class="scroll-top" id="st-0"></div>
      <div class="scroll-mid" id="sm-0" style="height: 248px;"></div>
      <div class="scroll-bottom" id="sb-0"></div>
    </div>
    <div class="scroll-textbox" id="stb-0" style="margin-top: -138px;">
      <input type="text" class="scroll-textbox-input right-input" value="50" id="in-1" name="txt">
    </div>
  </div>
</div>
 </div>        
</div>
javascriptjqueryhtmlcss

Answer №1

Is this what you are looking for?

$( document ).on( "keydown", ".right-input", function(ev) {
   if (ev.which == 38 || ev.which == 104) { //for moving up
        $this.val((parseInt($this.val()) + 1));
    } else if (ev.which == 40 || ev.which == 98) { //for moving down
        $this.val((parseInt($this.val()) - 1));
    }
});

Answer №2

After making some changes to your original jsFiddle project, here's the updated link: http://jsfiddle.net/5aJzD/14/

if (e.which == 38 || e.which == 104) {
    height++;
} else if (e.which == 40 || e.which == 98) {
    height--;
}

height=parseInt(height);
$("#in-1").val(height);

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

Increase the font size of a div using CSS to make it appear larger

Utilizing a WYSIWYG-editor, I am creating content that I want to display with double font-size, without directly altering the HTML code. Here is an example of the HTML structure: <div id="contents"> <p style="text-align:center"> <spa ...

htmlcssfont-size

What is the reason behind having several node modules directories within every project?

I'm just starting out with JS development and I have a question about the size of node modules. It seems that when many projects accumulate, we end up having to delete the node_modules folder because it takes up so much space. So, why isn't there ...

javascriptnode.jsnpmnode-modules

What is the best way to use identical styles for 2 different classes at separate breakpoints?

Is it possible to apply a chunk of (S)CSS to two different elements in two different breakpoints to avoid redundancy? I am using Bootstrap 4.6. <div class="one"> <div class="content">Something</div> </div> & ...

cssbootstrap-4sass

"Exploring the seamless integration of easyXDM, AJAX, and En

In this new inquiry, I am facing a similar challenge as my previous query regarding loading a PHP file into a cross-domain page with dynamic element height. However, I am now exploring a different approach. Although I have managed to load my script into a ...

phpjavascriptajaxeasyxdm

What is the process of transforming async/await code into synchronous code in JavaScript?

Blocking the event loop is generally considered bad practice due to its consequences. However, even the native fs module includes some synchronous functions for specific purposes, such as CLIs using fs.readFileSync. I am interested in converting the follo ...

javascriptnode.jsasynchronous

How can I line up two divs horizontally within a container div?

Apologies if my terminology is off, I am relatively new to this. My goal is to align two divs horizontally, one containing an image and the other the message content. I have created a messaging user interface. Everything was functioning correctly until I ...

htmlcss

Pass a link by pressing Enter

Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: https://i.sstatic.net/nE1FY.png The terms of use a ...

javascripteventsenter

Pagination not displaying results beyond the initial page

Having an issue with my current pagination setup. The first page displays the correct number of records and page links, but when I navigate to a different page, no records or page links show up. If anyone can spot where the problem might be occurring, it ...

phpjquerypagination

Steps to include a jQuery reference in a JavaScript file

I'm looking to create an external JavaScript file with validation functions and incorporate jQuery into it. Can anyone provide guidance on how to accomplish this? I attempted the code below, but unfortunately, it doesn't seem to be functioning c ...

javascriptjquery

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

javascripthtmlajax

What is the best way to align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

Finding the file in a separate directory within the src path

In my projects directory, I have a folder named projects which contains both a game folder and an engine folder. Inside the engine folder, there is an engine.js file. My issue is that I want to access this engine.js file from my game.html file located in a ...

javascripthtmlhyperlink

Invalid Syntax: The token '21' is found unexpectedly at column 12 in the expression [2013-08-28 21:10:14] beginning at [21:10:14]

I'm in the process of creating a straightforward directive for a date countdown. However, I've hit a roadblock with this particular error: Syntax Error: Token '21' is an unexpected token at column 12 of the expression [2013-08-28 21:10 ...

javascriptangularjsangularjs-directive

Update the content inside a <p> tag dynamically using Javascript based on the selected option

Struggling with Javascript and need some guidance. I have a select box with 4 options, and I want to update the contents of a <p> tag with an id of pricedesc based on the selected option. Here is my current code: function priceText(sel) { var l ...

formsselectjavascript

Calculate the number of elements shared between two arrays using JavaScript

I am working with two arrays of objects and I need to determine how many different types of cars we have. The first array contains the IDs of all the cars, while the second array contains information about the types of cars. Here is the data: var arr = ...

javascriptarraysjson

Packager freezing after running npm audit and the component directory is nonfunctional

Greetings, To begin with, I would like to acknowledge that this issue may have been addressed in previous posts, but despite following suggestions on Stack Overflow and GitHub, I am still facing two specific problems. Here are the issues I am encounterin ...

javascriptreact-nativenpmexpo

Embedding PHP code within the value attribute of an HTML element is

Hey there! I'm looking to perform a database search and then display the results in a pre-populated HTML form for the user. I've pinpointed the issue in my code where PHP is not being recognized by the server. I'm currently using UwAMP. To ...

phphtmlmysqlmysqliserver-side-validation

Refresh the content of an iframe (local HTML) by clicking on buttons

When a user clicks on a button, I am loading an HTML file into a DIV (iframe). The issue arises when the user clicks another button and wants to reload the iframe with a different HTML file. This is the current code snippet: <script type="text/javasc ...

javascriptjqueryhtmlcssiframe

menu fails to expand when clicked in mobile view

Could someone please help me troubleshoot why the menu icon is not expanding in mobile view? I'm not sure what I did wrong. Here is the link for reference: Snippet of HTML: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ...

htmlcsstwitter-bootstrapresponsive-design

When sorting in AngularJS using the orderBy filter, remember that string values should come before numeric values: for example, sort as follows (n/a, 0,

While running an AngularJS filter sorting on a table, I encountered an issue where if the value is 'n/a' (which is a numeric string), the sorting is incorrect. I expected the order to be n/a, 0, 1, 2, 5, 100 since strings should be considered l ...

javascriptangularjssorting