Spacing placeholder

Is there a way to leave the placeholder text in place while typing and have it extend forward as I type?

For example, if I type 100 spaces and then "INX", it should look like this:

100 INX

So that as I type "100." the "INX" moves forward, resulting in:

100 INX

<!DOCTYPE html>
<html>
<body>

<h1>Extend Placeholder Forward</h1>

  <input type="text" id="left" name="left" oninput="right.value = left.value; return true;" placeholder="INX"/>
  <input type="text" id="right" name="right" oninput="left.value = right.value; return true;" placeholder="INX" disabled />

</body>
</html>
javascripthtmljquerycss

Answer №1

It is not possible to alter the behavior of a native placeholder.

One workaround involves using positioning, pseudo elements, and CSS variables:

document.querySelector('#left').addEventListener('input', function() {
  this.parentElement.style.setProperty('--val', "'"+this.value+"'");
  document.querySelector('#right').value = this.value ? this.value + ' INX' : '';
});
#div1, #div2 {
  position: relative;
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  --val: '';
  font-family: sans-serif;
  font-size: 14px;
}

#div1::after {
  content: var(--val) ' INX';
  position: absolute;
  left: 3px;
  top: 1px;
  bottom: 1px;
  pointer-events: none;
  line-height: 20px;
}

#left, #right {
  font-family: inherit;
  font-size: inherit;
  caret-color: black;
}

#left {
  color: transparent;
}
<h1>Extend placeholder forward</h1>

<div id="div1"><input type="text" id="left" name="left" maxlength="18" /></div>
<div id="div2"><input type="text" id="right" name="right" placeholder="INX" disabled /></div>

Answer №2

When working with an input element, it can be challenging to attach pseudo elements to it.

However, by taking a different approach and using a contenteditable div instead of an input, you can successfully attach an after element with the content being the INX. This after element will move ahead of the actual input as the user types:

div {
  display: inline-block;
  width: auto;
  border: 1px solid black;
  border-radius: 5px;
  background: #eeeeee;
  padding: 5px;
}

div::after {
  content: ' INX';
}
<div contenteditable></div>

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

Error message: Unforeseen node express token problem

Whenever I attempt to call the endpoint provided below, Postman returns an error as shown: { "success": false, "error": "Unexpected token / in JSON at position 7" } Within the addFollowing function, you'll notice that I ...

javascriptnode.jsmongodbexpressmern

increasing the size of the input field on the lower row of the form

I have a form with two rows of text boxes. The first row contains three text boxes, while the second row should only have one text box that spans 100% of the width. Here is the current code: <div class="row"> <div class="col-md-4"> ...

htmlcssasp.netbootstrap-4flexbox

No traces of SOI could be detected in the stored canvas image

I have a unique project using Three.js, where I am enabling users to save diagrams they draw on a canvas as JPEG images. The process involves: <a id="download" download="PathPlanner.jpg">Download as image</a> function download() { var dt = ca ...

javascriptcanvasthree.jsjpeg

JavaScript and AJAX: Dynamically Create URLs

I don't have any experience with web development, so could you please explain in detail? If my questions are unclear, feel free to ask for more information. Imagine I have a webpage with the following URL: www.mycompany.com/category1 This page has ...

javascriptjqueryhtmlajaxurl

Retrieve multiple data sets

Here's the code I'm currently using, it pulls a random profile picture along with the user's first and last name. It works great, but how can I make it pull more than one at a time? $query = $db->query("SELECT * FROM `content` ORDER BY R ...

phphtmlpdoaspnetdb

Can one determine if a webpage is being displayed within an Infragistics igDialog?

Occasionally, my web page is displayed without a container and other times it's embedded within an igDialog of another container page, based on the user's navigation throughout our web application. Is there a way, using pure javascript or jQuery ...

javascriptjqueryhtmlinfragisticsignite-ui

When the div is loaded, automatically navigate to the crucial li element within it, such as the one with the class "import

Welcome to my first webpage: <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="comment"></div> <script type="text/ja ...

javascriptjqueryhtmlscrollload

Accessing a JSON file from AWS S3 using Node.js

I was able to successfully read a JSON file stored in my S3 bucket, but I found myself having to perform various transformations that are somewhat unclear to me. When logging the data as it arrives, I am seeing an output of Buffer data s3.getObject(objPar ...

javascriptnode.jsjsonamazon-s3

Pressing the Button Increases the Counter, However the Counter Resets After

My goal is to create a basic counter with increment and reset buttons. When I click on the increment button, the counter properly goes from 0 to 1 (I can confirm this by checking the console log in Chrome). The issue arises when, after incrementing, the c ...

javascripthtmlbuttononclickincrement

Encountering an issue where I am unable to access properties of undefined (specifically 'up') within Material UI styling

I encountered an error message Uncaught TypeError: Cannot read properties of undefined (reading 'up') while executing the code snippet below: I am having trouble with compiling my react js Code Snippet from Index.js import React from 'react ...

javascriptreactjsmaterial-uimaterial-design

Unable to select a div element with a specific attribute using nth-child in CSS

I have encountered some outdated legacy blog code and am currently attempting to isolate the first div element with the attribute of "text-align: left". Below is a simplified example of the code snippet I am dealing with: <div class="et_pb_module e ...

css

discovering the nearest preceding sibling that includes the class .myClass

I have multiple <tr> elements, some of which contain a <td> with the class class="myClass" and some do not. Here is an example of how it may look: <tr> <td class="myClass"></td> <td></td> </tr> <tr> & ...

javascriptjquery

Unpredictable Dependency Outcomes in Node.js

Encountering a warning while running yarn install where all dependencies are installed, but a specific warning is triggered: Warning: Pattern ["esprima-fb@~3001.0001.0000-dev-harmony-fb"] is attempting to unpack in the same destination "/Users/Me/Librar ...

javascriptnode.jsexpressnpmyarnpkg

Is it possible for Javascript to handle a string of 27601 characters in length?

I have created a webmethod that returns an object containing strings. Each string in the object is of length 27601. This pattern continues for all array members - str(0) to str(n). When my webmethod returns this exact object, I encounter an issue on the c ...

javascriptvb.netwebmethod

Set an ID value to a variable in jQuery Mobile

Hey there! I'm trying to figure out how to assign latitude and longitude values to a variable in my code so I can pass them by appending it to the url. For example, page.html?cords=[varname] The current code snippet that displays the coordinates is a ...

jqueryjquery-mobileelement

position: absolute is only applying to the initial item

I have a user card component with a menu button at the top that should display a menu when clicked. The issue I'm facing is that when I click on the menu button of the other user cards, the menu still shows on the first card instead of the one I click ...

javascripthtmlcssvue.jsvuejs2

Utilize JavaScript to dynamically deactivate hyperlinks during runtime

Utilizing Bootstrap <ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu"> <li role="presentation" id="LiNewsFeed"><a href="javascript:GetNewsFeed();">News Feed</a></li> <li role ...

javascriptjqueryhtmltwitter-bootstrap

What is the best approach to tackle this design?

As a newcomer to React, I'm facing challenges in positioning components. The layout I envision is consistent across all pages, with certain elements remaining the same. Should I utilize a grid system for this design? How should I approach achieving th ...

javascriptreactjsflexboxgridtailwind-css

Preventing jQuery parser from turning arrays into objects

My JavaScript data file has the following structure: data = { items : [ {name: 'ABC'}, {name: 'CDF'} ] } After passing this data to $.ajax(type: 'POST', data: data), the converted data appears like this: it ...

javascriptjqueryarraysajaxhttp-post

How can I display a button (hyperlink) on a new line using CSS or jQuery?

I am looking to create a new line after the last input of my form. On this new line, I want to add a "remove-link". This is my HTML: <div class="subform dynamic-form"> <label for="id_delivery_set-0-price"> Price: </label> <inp ...

jquerycss