Let's say I have a text input field with the initial value of "insert text here" coded like this:
<input type="text" value="insert text here" />What I want is for the text inside the input field to disappear automatically when the user clicks on it, but if they decide not to write anything and click away, the text should reappear.
Does anyone know how to accomplish this?
Thank you
Utilize the placeholder attribute
<input name="" type="text" placeholder="enter placeholder text here."/>However, be aware that it might not function in older browsers. If you need to cater to older browsers as well, consider using JavaScript/jQuery to address this issue.
<input type="text" class="userName" value="Enter User Name..." />
$(document).ready(function(){
$('.userName').on('focus',function(){
var placeHolder = $(this).val();
if(placeHolder == "Enter User Name..."){
$(this).val("");
}
});
$('.userName').on('blur',function(){
var placeHolder = $(this).val();
if(placeHolder == ""){
$(this).val("Enter User Name...");
}
});
});
Check out the demo JSFIDDLE
Take advantage of the placeholder feature
<input type="text" placeholder="type your text here" />
<input type="text" name="first_name" placeholder="write your text here">
To add placeholder text in an input field, simply include the "placeholder" attribute as shown below:
<input type="text" placeholder="enter your text here" />
The placeholder text will disappear automatically as soon as you start typing in the input field.
For more information on the "placeholder" attribute, visit this link.
Opt for a placeholder rather than value.
<input type="text" placeholder="enter your text" />
To achieve this functionality, you can utilize Placeholder. However, it is important to note that older versions of browsers may not support Placeholder.
<input type="text" value="some text" placeholder="insert text here"/>
If you are using an older browser, you can visit the following link to download a JavaScript file:
Download Placeholder.js
To ensure cross-browser compatibility, consider utilizing the following code snippet:
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" id="myText" placeholder="Name">
<p>Click the button to display the placeholder text of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myText").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...
I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...
I am currently using ruby tags to include pinyin in my text. For instance: <p> <ruby>与<rt>yǔ</rt></ruby><ruby>摩<rt>mó</rt></ruby><ruby>拜<rt>bài</rt></ruby><ruby& ...
I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...
UPDATE Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead. I am currently working on a project that includes a persistent header ...
For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns. To accomplish this layou ...
I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...
Trying to implement a check for the CSS 'display' property being set to "none", then slideDown the element "menuBK". If not, slideUp "menuBK" but encountering an error in my IF statement. $(document).ready(function(){ $("#burger").click(func ...
I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...
Is there a way to automatically play a sound clip when my page loads? Are there any specific JavaScript or jQuery methods I can use for this, as I am developing my page using PHP. ...
Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...
When CSS is used to hide scrollbar html, body { width: 100%; overflow-x: hidden } The above code snippet removes the scroll from the window but triggers it on the body element. To calculate the scroll values in such cases, you can use: pageOffset = ...
Currently, I have an HTML input page set up to input scores into a grid. status valueA valueB checkboxA checkboxB 1 4 5 2 x x 2 3 3 1 x 3 5 7 2 4 ...
Recently, I've been experiencing a frustrating issue that's giving me a splitting headache. Despite scouring this forum for answers, my problem persists. Here's the situation: I have a button that triggers modals. Upon first click after refr ...
I need to display some text inside a box. To achieve this, I enclose my text within an <article> element. <article> <p>Here is the text that I want to display in a box.</p> </article> I then style it as a block with fix ...
I'm feeling a bit out of my depth with this, but here's the situation. I inherited a form that has one input field for email and a submit button. The code was not written by me, so I'm struggling to understand it. I've tried researching ...
Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google. I've heard it can be done with labels, but I specifically need to use a button for better UX/UI. <button style="position:fixe ...
I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...
I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet: var audio = document.getElementById(audioId); if (audio.paused) { audio.src = clip; audio.play(); ...
<div class="white"> <div class="transparent"> ---- </div> <div class="content"> ---- </div> </div> I am working with a parent div .white that has a white background color. Inside this parent div, there are mul ...