My input is structured like this:
<input value="My text" placeholder="Placeholder">
Typing in the input causes the placeholder text to disappear, which is expected.
However, I am looking to keep the placeholder text visible as a background behind the text that the user inputs:
In addition, I would like to have the ability to change the background text using JavaScript.
A more efficient solution achieved with ease effect using CSS. See the code snippet here: http://jsfiddle.net/csdtesting/wbqq129q/
Code:
#login {
font-size: 12px;
margin: 0 auto;
width: 700px;
}
#login li {
float: left;
list-style: none;
margin-left: 30px;
position: relative;
}
#login li:first-child {
margin-left: 0;
}
label {
line-height: 40px;
position: absolute;
right: 120px;
top: 0;
bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0
}
input {
color: transparent;
font-size: 12px;
height: 35px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
input[type="email"],
input[type="password"] {
border: 1px solid #ccc;
height: 35px;
padding: 0 10px;
width: 240px;
position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
z-index: 2;
}
input[type="email"] {
color: rgba(47, 130, 194, .8);
}
/* Placeholder */
input[type="email"]:-moz-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]:-ms-input-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]::-webkit-input-placeholder {
color: rgba(47, 130, 194, .6);
}
/* Label */
input[type="email"] + label {
color: rgb(47, 130, 194);
}
input:focus + label {
right: 10px;
}
input[type="email"]:focus,
input[type="password"]:focus {
background-color: rgba(255, 255, 255, .8);
}
/* Submit */
input[type="submit"] {
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222;
color: #fff;
cursor: pointer;
height: 35px;
width: 110px;
}<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
</ul>
</form>It's challenging to come up with a practical use case for such behavior since it could potentially hinder user input.
One possible approach would be to utilize the input::after method, although this feature is currently not supported by any browser (credit to @JukkaK.Korpela).
Alternatively, you can achieve a similar effect using a wrapper element and a data attribute like so:
<div class="placeholder" data-placeholder="my placeholder">
<input value="My text" />
</div>
Applying the following CSS styling:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 3px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Resulting in:
Check out the jsFiddle demo here.
If you find that significant adjustments are needed to enhance the appearance, you may want to consider utilizing the wrapping <div> element as an input field look-alike:
<div class="editable" data-placeholder="my placeholder">
<input type="text" value="my Text" />
</div>
CSS:
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
}
.editable::after
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
If you want to achieve a similar effect, consider implementing the following code:
HTML structure:
<div class="container">
<input type="text">
<span class="placeholder-text">Enter text here</span>
</div>
CSS styling:
.container {
position: relative;
}
input {
font-size: 16px;
height: 50px;
}
.placeholder-text {
position: absolute;
font-size: 20px;
pointer-events: none;
left: 5px;
top: 5px;
transition: 0.2s ease all;
}
input:focus ~ .placeholder-text {
top: -15px;
font-size: 14px;
}
.box {
border: 1px solid;
border-radius: 10px;
padding: .25rem 1rem 1rem;
color: #555;
font-family: sans-serif;
display: flex;
flex-direction: column;
width: max-content;
}
.wrapper {
position: relative;
width: 450px;
}
.wrapper * {
font-size: 1.25rem;
letter-spacing: 2px;
font-family: monospace;
padding: .125rem .25rem;
display: flex;
width: calc(100% - 1rem);
}
input {
width: 4000px;
border: 0;
}
.placeholder {
position: absolute;
pointer-events: none;
left: 0;
top: 0;
width: min-content;
}<div class="box">
<h2>Short Homepage Headline</h2>
<p>Use up tp 30 characters</p>
<div class="wrapper">
<input type="text">
<span class="placeholder">
______________________________
</span>
</div>
</div>What do you think of the functionality, use case scenario, and overall design?
(attempting to address some of the issues mentioned earlier)
This could serve as a useful tool for headline writers to monitor character count without using JavaScript. It provides insight into how the headline fits within the template's constraints, although the limit is flexible.
To achieve this, you can utilize the 'onchange' handler. Develop a function that appends the remaining placeholder text to what the user has typed and positions the cursor at the end of the input.
Below is some conceptual javascript/pseudocode, though untested and incomplete:
userTextLength: 0,
placeholder: "xx/yy/zz",
onchange: function() {
boxText = document.querySelector('#elem').value;
if (boxText.length === 1) {
this.userTextLength++;
placeholder = boxText.slice(userTextLength);
userText = boxText.slice(0, userTextLength);
document.querySelector('#elem').innerHTML = userText + placeholder;
}
if (boxText.length < placeholder.length) {
}
else {
this.userTextLength += 1;
userInput =
}
}
I did not address cursor focusing here, which would require an 'onfocus' event utilizing the userTextLength property to determine its placement. For guidance on how to do this, check out this helpful answer on Stack Overflow.
I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...
In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...
Is there a way to build and export a Next.js project without minifying and optimizing the output files? ...
Is there a way to extract and display only the price value (after the " - ") within a div with the id of "price", updating as the select element is changed? <select id="product-select" name=""> <option value="1">Product Name / Yellow / S - ...
Trying to use a transcluding directive within another controller, but the inner scope isn't being redefined as expected. Despite trying different methods, I can't seem to figure out what's going wrong. The simplified code looks like this: ...
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="widt ...
While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...
Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...
After calling my JSON, I receive a specific set of arrays of objects that contain valuable data. I am currently struggling to access this data and display it in a dropdown menu. When I log the response in the console, it appears as shown in this image: htt ...
I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...
Currently, I am utilizing NextJS 14 with App router alongside Spring Boot on the backend. Within my application, I have both public and private routes set up. For the private routes, users are required to log in through a designated login page. Upon succes ...
Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...
Having some trouble setting up my React application that was built using the React Create App template. When trying to host it with IIS, I encountered some issues. The index.html main page seems to be loading fine, but the compiled JS file is not loading ...
I am looking to make some changes in the JavaScript code below by removing the image logo.png lines and replacing them with iframe code. currentRoomId = document.getElementById('roomID').value; if ( document.getElementById('room_' + c ...
I have been working on storing images in a MongoDB database and trying to display the response I receive from an Express API as an image on the client side. The image source URL looks like this: src="/image/data/5a44dde172aa021d107e7d33" When I try to wr ...
Just starting out with JS and jquery, I quickly put together a stopwatch code in JS that seems to work accurately up to 10 minutes. The issue arises after the 10-minute mark where it starts falling a few seconds behind (I compared it to a digital stopwatc ...
Due to the inability of a ngIf and ngFor to coexist, I added an ng-container to facilitate the loop. However, after making this change, nothing seems to be working as expected without any clear reason. Below is the code snippet that is causing trouble: Vi ...
What is the best method for passing data back to the parent scope in AngularJS without using isolated scopes? Imagine I have a directive called x, and I want to access its value named a. The desired syntax would be: <x a="some.obj.myA"></x> c ...
Lately, I have been experimenting with some code in an attempt to delve deeper into functional programming. However, I seem to have hit a snag. I am struggling with handling an object. My goal is to add key-value pairs to an object without reassigning it, ...
I have set up this jsBin to show the problem I am facing. When you visit the link and try to type "Five," the expected behavior would be to type "Five" and then press tab. However, in this case, you need to type "Five" and then either escape or click outsi ...