I am building a pop up box that every time someone fires it (with delay), a counter displays that shows the number of clicks and the dates of the clicks!
How can I get the time and the clicks to be shown in a cell table something like this:
Clicks Time
1 thusday 4 2018
2 monday 3 2018
Here is my HTML code:
function Msg1() {
document.getElementById('myText').innerHTML = 'Hey <strong>Thanks!</strong>';
}
var counter1 = 1;
var popup = document.getElementById("popup");
var input = document.getElementById("popup-delay");
var showButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");
showButton.addEventListener("click", function onShowClick() {
// Get the user input and convert it into a number
var value = parseInt(input.value, 10);
// If the input is not a number
if (isNaN(value)) {
// Warn the user
alert("NaN (Not A Number) !");
}
// Otherwise
else {
// Convert milliseconds to seconds
var delay = value * 1000;
// Turn off the click listener on the "Show" button
showButton.removeEventListener("click", onShowClick);
// Start the countdown to show the popup
document.getElementById("num1").innerHTML = counter1;
counter1 = counter1 + 1;
document.getElementById("num4").innerHTML += "<span>" + Date() + "</span>";
setTimeout(function() {
// Show the popup
popup.style.display = "block";
// Turn on the click listener on the "Close" button
closeButton.addEventListener("click", function onCloseClick() {
// Turn off the click listener on the "Close" button
closeButton.removeEventListener("click", onCloseClick);
// Turn on the click listener on the "Show" button
showButton.addEventListener("click", onShowClick);
// Hide the popup
popup.style.display = "none";
});
}, delay);
}
});
#popup {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
padding: 1em;
}
#thecounter {
float: right;
background-color: rebeccapurple;
padding-top: 50px;
padding-bottom: 50px;
width: 10%;
margin-right: 10px;
font-size: 30px;
color: white;
text-align: center;
}
#thetime {
float: right;
background-color: rosybrown;
padding-top: 50px;
padding-bottom: 50px;
width: 10%;
font-size: 30px;
color: white;
text-align: center;
}
#num4 span {
font-size: 20px;
display: block;
margin-bottom: 4px;
padding: 4px;
}
Delay: <input type="text" id="popup-delay" /> <button type="button" id="popup-show">Show</button>
<div id="popup">
<p>I am a popup :-)</p>
<button type="button" id="popup-close">Close</button>
</div>
<div id="container">
<div id="thecounter">
<p id="num2">clicks </p>
<p id="num1">0 </p>
</div>
<div id="thetime">
<p id="num3">time </p>
<p id="num4"> </p>
</div>
</div>
The problem is that you are getting the elements by id before the dom rendered so it always get null value
just change the event listener of the button to a function like below
function onShowClick () {
var popup = document.getElementById("popup");
var input = document.getElementById("popup-delay");
var showButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");
// get the user input and convert it into a number
var value = parseInt(input.value, 10);
// if the input is not a number
if (isNaN(value)) {
// warn the user
alert("NaN (Not A Number) !");
}
// otherwise
else {
// convert milliseconds to seconds
var delay = value * 1000;
// turn off the click listener on the "Show" button
showButton.removeEventListener("click", onShowClick);
// start the countdown to show the popup
// document.getElementById("num1").innerHTML= counter1;
counter1= counter1+1;
let currDate = Date();
// document.getElementById("num4").innerHTML += "<span>" + currDate + "</span>";
// add new Row
let table = document.getElementById("table");
var tr = document.createElement('tr');
var tdCounter = document.createElement('td');
tdCounter.appendChild(document.createTextNode(counter1))
tr.appendChild(tdCounter)
var tdTime = document.createElement('td');
tdTime.appendChild(document.createTextNode(currDate))
tr.appendChild(tdTime)
table.appendChild(tr)
setTimeout(function () {
// show the popup
popup.style.display = "block";
// turn on the click listener on the "Close" button
closeButton.addEventListener("click", function onCloseClick () {
// turn off the click listener on the "Close" button
closeButton.removeEventListener("click", onCloseClick);
// turn on the click listener on the "Show" button
showButton.addEventListener("click", onShowClick);
// hide the popup
popup.style.display = "none";
});
}, delay);
}
}
and call it on onclick in html for the button like below
<body>
Delay: <input type="text" id="popup-delay" />
<button type="button" onclick="onShowClick()" id="popup-show">Show</button>
<div id="popup">
<p>I am a popup :-)</p>
<button type="button" id="popup-close">Close</button>
</div>
<div id="container">
<table id="table">
</table>
</div>
</body>
the out put like below
Main Page
Pop up Page
Related
I have a page on my site which has 3 separate 'hidden' divs. Each with it's own 'show/hide' button.
Currently... each div and button set functions independently.
Therefore... if all divs are shown (open) at the same time, they stack according to their respective order.
Instead of that, I would rather restrict the function a bit, so that only div can be shown (open) at a time.
Example: If Div 1 is shown, and the user then clicks the Div 2 (or Dive 3) button, Div 1 (or which ever div is open at the time, will close.
I am not sure how to adjust my code to make that all work together. I have tried a few ideas, but they were all duds. So I posted a generic 'independent' version below.
function show_Div_1() {
var div1 = document.getElementById("Div_1");
if (div1.style.display === "none") {
div1.style.display = "block";
} else {
div1.style.display = "none";
}
}
function show_Div_2() {
var div2 = document.getElementById("Div_2");
if (div2.style.display === "none") {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
function show_Div_3() {
var div3 = document.getElementById("Div_3");
if (div3.style.display === "none") {
div3.style.display = "block";
} else {
div3.style.display = "none";
}
}
.div {
width: 270px;
height: 30px;
padding-left: 10px;
}
<button type="button" onclick="show_Div_1()">Div 1 - Red</button>
<button type="button" onclick="show_Div_2()" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_Div_3()" style="margin-left: 4px">Div 3 - Green</button>
<div id="Div_1" class="div" style="background-color:red; display: none;"></div>
<div id="Div_2" class="div" style="background-color:blue; display: none;"></div>
<div id="Div_3" class="div" style="background-color:green; display: none;"></div>
I would suggest using data attributes for a toggle. Why? you can use CSS for them and you can use more than just a toggle - multiple "values".
Here in this example I do your "click" but also added a double click on the button for a third value. Try some clicks and double clicks!
A bit of overkill perhaps but more than just "toggle" for example you could use this to show "states" of things like a stoplight or any number of things.
Use the grid display and move them by just adding a data attribute value and double click it to get it to go (using css) to some grid-area:, things like that.
const hideValues = {
hide: "hidden",
show: "showme",
double: "dblclick"
};
function dblClickHander(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = action;
}
function toggleEventHandler(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = showHide;
}
/* set up event handlers on the buttons */
const options = {
capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
width: 270px;
height: 30px;
padding-left: 10px;
}
.toggle-target[data-hideme="hidden"] {
display: none;
}
.toggle-target[data-hideme="showme"] {
display: block;
}
.toggle-target[data-hideme="dblclick"] {
display: block;
border: solid 2px green;
padding: 1rem;
opacity: 0.50;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
}
.green-block {
background-color: green;
}
<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>
This can be done in many ways. I think the best approach in your case could be
BUTTONS
<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>
<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>
SCRIPT
function show_div(div_id) {
var thisDiv = document.querySelector('#'+div_id);
var thisState = thisDiv.style.display;
// close all in any cases
document.querySelectorAll('.div').forEach(function(el) {
el.style.display = "none";
});
// open this div only if it was closed
if (thisState == "none" ){
thisDiv.style.display = "block";
}
}
I am looking for help to customise the code when onclick in the input field type open flmngr window + selecting the file and adding to the input field the URL of the file selected
window.onFlmngrAndImgPenLoaded = function() {
var elBtn = document.getElementById("btn");
// Style button as ready to be pressed
elBtn.style.opacity = 1;
elBtn.style.cursor = "pointer";
var elLoading = document.getElementById("loading");
elLoading.parentElement.removeChild(elLoading);
// Add a listener for selecting files
elBtn.addEventListener("click", function() {
selectFiles();
});
}
function selectFiles() {
let flmngr = window.flmngr.create({
urlFileManager: 'https://fm.n1ed.com/fileManager',
urlFiles: 'https://fm.n1ed.com/files'
});
flmngr.pickFiles({
isMultiple: false,
acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
onFinish: function(files) {
showSelectedImage(files);
}
});
}
function showSelectedImage(files) {
let elImages = document.getElementById("images");
elImages.innerHTML = "";
var file = files[0];
let el = document.createElement("div");
el.className = "image";
elImages.appendChild(el);
let elImg = document.createElement("img");
elImg.src = file.url;
elImg.alt = "Image selected in Flmngr";
el.appendChild(elImg);
let elP = document.createElement("p");
elP.textContent = file.url;
el.appendChild(elP);
}
body {
padding: 20px;
background-color: #F4F4F4;
}
#images {
.image {
border: 1px solid #DDD;
box-shadow: 5px 5px 0 0 #DDD;
background-color: white;
padding: 10px;
display: inline-flex;
flex-direction: column;
margin: 0 25px 25px 0;
img {
max-height: 350px;
border: 1px solid #DDD;
}
p {
margin: 5px 0 0 0;
font-size: 14px;
color: #444;
}
}
}
<h1 class="h5 mb-3">Flmngr file manager: select a single image</h1>
<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select image...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
<h2 class="h5 mt-5">Selected image</h2>
<div id="images">
No image selected yet.
</div>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
I am looking for something like this clicking on the input field open the flmngr file manager, clicking or selecting the file, populate the URL of the file to the input field
<input type="text" name="field_name" id="field_name" value="https://fm.n1ed.com/files/book.png" onclick="BrowseServer('field_name');">
I really appreciate any help.
Thank you
Best Regards
I found a solution to click on the input
window.onFlmngrAndImgPenLoaded = function() {
var elBtn = document.getElementById("FlmngrBrowseServer");
// Style button as ready to be pressed
elBtn.style.opacity = 1;
elBtn.style.cursor = "pointer";
var elLoading = document.getElementById("loadingFlmngrBrowseServer");
elLoading.parentElement.removeChild(elLoading);
// Add a listener for selecting files
elBtn.addEventListener("click", function() {
selectFiles();
});
}
function selectFiles() {
let flmngr = window.flmngr.create({
urlFileManager: 'https://fm.n1ed.com/fileManager',
urlFiles: 'https://fm.n1ed.com/files'
});
flmngr.pickFiles({
isMultiple: false,
acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
onFinish: function(files) {
showSelectedImage(files);
}
});
}
function showSelectedImage(files) {
var file = files[0];
var x = file.url;
document.getElementById("FlmngrBrowseServer").value = x;
}
<input type="text" name="configuration[MODULE_PAYMENT_BTC_IMAGE]" value="images/payment_bitcoin.png" id="FlmngrBrowseServer">
<div id="loadingFlmngrBrowseServer"></div>
<input type="text" name="configuration[MODULE_PAYMENT_BTC_IMAGE]" value="images/payment_bitcoin.png" id="FlmngrBrowseServer1">
<div id="loadingFlmngrBrowseServer1"></div>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
field and select the file then get the URL link and parse to the input field, but I need a solution for 2 or more input fields.
The following code on the website page creates a button that the user receives a random number at any time by clicking the button:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>rand100.html</title>
<style type = "text/css">
fieldset {
width: 600px;
margin-right: auto;
margin-left: auto;
}
label {
float: left;
width: 250px;
text-align: right;
margin-right: 1em;
clear: left;
}
span {
float: left;
}
button {
display: block;
clear: both;
margin: auto;
}
</style>
<script type = "text/javascript">
function roll(){
//create variables for form elements
var spnRaw = document.getElementById("spnRaw");
var spn100 = document.getElementById("spn100");
var spnFinal = document.getElementById("spnFinal");
//get random number
var raw = Math.random();
spnRaw.innerHTML = raw;
//multiply by 100
var times100 = raw * 100;
spn100.innerHTML = times100;
//get the ceiling
var final = Math.ceil(times100);
spnFinal.innerHTML = final;
} // end roll
</script>
</head>
<body>
<h1>Make random numbers 1 - 100</h1>
<form>
<fieldset>
<label>raw</label>
<span id = "spnRaw">0</span>
<label>times 100</label>
<span id = "spn100">0</span>
<label>final</label>
<span id = "spnFinal">0</span>
<button type = "button"
onclick = "roll()">
roll the dice
</button>
</fieldset>
</form>
</body>
</html>
Now I want to make every user receive just one random number, that is, if the user clicks on the button and receives a random number, and again clicking on the button, this time a new random number will not be displayed.
That is, each user, if more than once, clicks the button, only receives a random number, no more.
How can I do this now?
That is to change the code so that even if the user after opening the site and clicking the button and then receiving the random number, clicked the button again, a new random number will not be received.
Please check the below code. just use a boolean e.g doRoll variable and set it to true. When you call roll() for the first time set the boolean variable to false after getting the random number.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>rand100.html</title>
<style type = "text/css">
fieldset {
width: 600px;
margin-right: auto;
margin-left: auto;
}
label {
float: left;
width: 250px;
text-align: right;
margin-right: 1em;
clear: left;
}
span {
float: left;
}
button {
display: block;
clear: both;
margin: auto;
}
</style>
<script type = "text/javascript">
var doRoll = true;
function roll(){
if(doRoll)
{
//create variables for form elements
var spnRaw = document.getElementById("spnRaw");
var spn100 = document.getElementById("spn100");
var spnFinal = document.getElementById("spnFinal");
//get random number
var raw = Math.random();
spnRaw.innerHTML = raw;
//multiply by 100
var times100 = raw * 100;
spn100.innerHTML = times100;
//get the ceiling
var final = Math.ceil(times100);
spnFinal.innerHTML = final;
doRoll = false;
}
} // end roll
</script>
</head>
<body>
<h1>Make random numbers 1 - 100</h1>
<form>
<fieldset>
<label>raw</label>
<span id = "spnRaw">0</span>
<label>times 100</label>
<span id = "spn100">0</span>
<label>final</label>
<span id = "spnFinal">0</span>
<button type = "button"
onclick = "roll()">
roll the dice
</button>
</fieldset>
</form>
</body>
</html>
You can define the value before the function:
var random = Math.random();
function roll() {
...
}
Or set it inside the function only if it is undefined:
var random;
function roll() {
if (typeof random === 'undefined') {
random = Math.random();
}
...
}
Or create some flag:
var rolled = false;
function roll() {
if (rolled) {
return;
}
...
rolled = true;
}
Or remove an event listener from the button:
function roll() {
...
button.onclick = null;
}
The link to the button object you can get from the event object:
function roll(event) {
...
event.target.onclick = null;
}
I know the question of closing a pop-up by clicking outside of it has been asked before. I have a somewhat complex pop-up and the solution offered by Phillip Walton isn't working for me.
His code simply made my page blurry but stopped the popup from appearing.
$(document).on('click', function(event) {
if (!$(event.target).closest('.maincontainer').length) {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
});
I also tried:
window.addEventListener('click', function(event) {
if (event.target != popup) {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
}, true);
This closes the popup when I click anywhere, including on the popup itself. I want it to close only when I click on part of the screen that isn't the popup.
The code to open the popup:
function openpopup() {
popup.style.display = 'initial';
setTimeout(function(){
popup.classList.add('popup--open');
popup.style.boxShadow = '0 0 45px 2px white';
maincontainer.classList.add('blurfilter')}, 10);
for (let i = 0; i < listitems.length; i++ ) {
setTimeout(function() {
listitems[i].classList.add('visible');
}, 100);
}
}
I added the event listener to a button
popupOpenbtn.addEventListener('click', openpopup);
The HTML structure:-
<div class="maincontainer>
...all my page content...
</div>
<div class="popup">
...popup contents...
</div
I would suggest using only css classes to style your popup and use JS only to add, remove and toggle that class. Not sure how close to your working exercise is this fiddle but I've prepared this to show how the document/window click event can be checked to successfully open/close the popup window.
var popupOverlay = document.querySelector('#popup__overlay');
var popupOpenButton = document.querySelector('#popupOpenButton');
var popupCloseButton = document.querySelector('#popupCloseButton');
var mainContainer = document.querySelector('main');
function closestById(el, id) {
while (el.id != id) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
popupOpenButton.addEventListener('click', function(event) {
popupOverlay.classList.toggle('isVisible');
});
popupCloseButton.addEventListener('click', function(event) {
popupOverlay.classList.toggle('isVisible');
});
mainContainer.addEventListener('click', function(event) {
if (popupOverlay.classList.contains('isVisible') && !closestById(event.target, 'popup__overlay') && event.target !== popupOpenButton) {
popupOverlay.classList.toggle('isVisible');
}
});
#popup__overlay {
display: none;
background-color: rgba(180, 180, 180, 0.5);
position: absolute;
top: 100px;
bottom: 100px;
left: 100px;
right: 100px;
z-index: 9999;
text-align: center;
}
#popup__overlay.isVisible {
display: block;
}
main {
height: 100vh;
}
<aside id="popup__overlay">
<div class="popup">
<h2>Popup title</h2>
<p>
Lorem ipsum
</p>
<button id="popupCloseButton">Close popup</button>
</div>
</aside>
<main>
<div class="buttonWrapper">
<button id="popupOpenButton">Open popup</button>
</div>
</main>
I have a page like below image
According to my requirement, user is allowed to enter digits from the keypad that is provided on the page only. So input field is readonly.
Now I am trying to get is, when user start entering month then other text should remain in text field until user types that. e.g. 05/DD/YYYY like this. And accordingly that text will be hide.
If I placed placeholder then when user starts entering digits all text gone. I don't want that. So I have taken "MM/DD/YYYY" text in seperate span tag.
var Memory = "0", // initialise memory variable
Current = "", // and value of Display ("current" value)
Operation = 0, // Records code for eg * / etc.
MAXLENGTH = 8; // maximum number of digits before decimal!
function format(input, format, sep) {
var output = "";
var idx = 0;
for (var i = 0; i < format.length && idx < input.length; i++) {
output += input.substr(idx, format[i]);
if (idx + format[i] < input.length) output += sep;
idx += format[i];
}
output += input.substr(idx);
return output;
}
function AddDigit(dig) { //ADD A DIGIT TO DISPLAY (keep as 'Current')
if (Current.indexOf("!") == -1) { //if not already an error
if ((eval(Current) == undefined) &&
(Current.indexOf(".") == -1)) {
Current = dig;
document.calc.display.focus();
} else {
Current = Current + dig;
document.calc.display.focus();
}
Current = Current.toLowerCase(); //FORCE LOWER CASE
} else {
Current = "Hint! Press 'Clear'"; //Help out, if error present.
}
if (Current.length > 0) {
Current = Current.replace(/\D/g, "");
Current = format(Current, [2, 2, 4], "/");
}
document.calc.display.value = Current.substring(0, 10);
document.getElementById("cursor").style.visibility = "hidden";
}
function Clear() { //CLEAR ENTRY
Current = "";
document.calc.display.value = Current;
document.calc.display.focus();
document.getElementById("cursor").style.visibility = "visible";
//setInterval ("cursorAnimation()", 5000);
}
function backspace() {
Current = document.calc.display.value;
var num = Current;
Current = num.slice(0,num.length - 1);
document.calc.display.value = Current;
document.calc.display.focus();
document.getElementById("cursor").style.visibility = "hidden";
}
function cursorAnimation() {
$("#cursor").animate({
opacity: 0
}, "fast", "swing").animate({
opacity: 1
}, "fast", "swing");
}
//--------------------------------------------------------------->
$(document).ready(function() {
document.getElementById("cursor").style.visibility = "visible";
//setInterval ("cursorAnimation()", 1000);
});
.intxt1 {
padding: 16px;
border-radius: 3px;
/* border: 0; */
width: 1017px;
border: 1px solid #000;
font-family: Droid Sans Mono;
background: #fff;
}
.txtplaceholder {
font-family: "Droid Sans Mono";
color: #D7D7D7;
position: relative;
float: left;
left: 219px;
top: 17px;
z-index: 10 !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
#cursor {
position: relative;
z-index: 1;
left: 32px;
top: 2px;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form Name="calc" method="post">
<div style="position:relative">
<span id="cursor">_</span>
<span class="txtplaceholder">MM/DD/YYYY</span>
<span style="z-index:100">
<input class="intxt1" autocomplete="off" id="pt_dob" name="display" value="" type="text" readonly>
</span>
<button class="cancel-icon" type="reset" onClick="Clear()"></button>
</div>
<div class="num_keypad1" style=" margin-top:19px;">
<!-- Screen and clear key -->
<div class="num_keys">
<!-- operators and other keys -->
<span id="key1" onClick="AddDigit('1')">1</span>
<span id="key2" onClick="AddDigit('2')">2</span>
<span id="key3" onClick="AddDigit('3')">3</span>
<span id="key4" onClick="AddDigit('4')">4</span>
<span id="key5" onClick="AddDigit('5')">5</span>
<span id="key6" onClick="AddDigit('6')">6</span>
<span id="key7" onClick="AddDigit('7')">7</span>
<span id="key8" onClick="AddDigit('8')">8</span>
<span id="key9" onClick="AddDigit('9')">9</span>
<span id="key0" onClick="AddDigit('0')" style="width: 200px;">0</span>
<span id="keyback" class="clear" onClick="backspace()"> <div class="num_xBox">X</div></span>
</div>
</div>
</form>
With the above Html code I am getting below result:
Problems coming are below:
My digits are going below the text "MM/DD/YYYY". I am not getting how should I get my digits above that text
How should I hide the text which is entered by user and display other accordingly e.g. "MM" should hide if user enters 05 and display other text like this "05/DD/YYYY".
Can anyone please help me in this?
NOTE: With input type=date or by any other plugins I can achieve above functionality but my requirement is different. I have to achieve this with HTML, CSS, JS only.
I would use a ready built data picker for this kind of thing as it would have all the error checking in built to ensure you enter a date in the correct format.
The way you are doing it, you are not able to check if the day is valid until you have entered the month, by which time the user will have to backspace and it will be a very slow and clunky process which is not very user friendly.
Anyway, if you persist with a number pad, here is how I would do it.
put the date in a global array
have a global index counter
add and remove values based on the index counter
The following is a very quick example of the above
var dateBits = ["D", "D", "M", "M", "Y", "Y", "Y", "Y"],
letters = ["D", "D", "M", "M", "Y", "Y", "Y", "Y"],
input = document.getElementById('pt_dob'),
currentIndex = 0;
function makeDate() {
return dateBits[0] + dateBits[1] + "/" + dateBits[2] + dateBits[3] + "/" + dateBits[4] + dateBits[5] + dateBits[6] + dateBits[7];
}
function AddDigit(number) {
dateBits[currentIndex] = number;
if (currentIndex < 8) {
currentIndex++;
}
input.value = makeDate();
}
function RemoveDigit() {
if (currentIndex > 0) {
currentIndex--;
}
dateBits[currentIndex] = letters[currentIndex];
input.value = makeDate();
}
function Clear() {
for (i = 0; i < letters.length; i++) {
dateBits[i] = letters[i];
}
currentIndex = 0;
input.value = makeDate();
}
input.value = makeDate(); // run this line onload or include this whole script at the bottom of the page to get your input to start with your text
.intxt1 {
padding: 16px;
border-radius: 3px;
/* border: 0; */
width: 1017px;
border: 1px solid #000;
font-family: Droid Sans Mono;
background: #fff;
}
#cursor {
position: relative;
z-index: 1;
left: 32px;
top: 2px;
visibility: hidden;
}
.num_keys > span {
display: inline-flex;
width: 2em;
height: 2em;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid black;
}
<form Name="calc" method="post">
<div style="position:relative"><span id="cursor">_</span>
<span class="txtplaceholder">MM/DD/YYYY</span><span style="z-index:100"><input class="intxt1" autocomplete="off" id="pt_dob" name="display" value="" type="text" autocomplete="off" readonly></span>
<button class="cancel-icon" type="reset" onClick="Clear(); return false;">clear</button>
</div>
<div class="num_keypad1" style=" margin-top:19px;">
<!-- Screen and clear key -->
<div class="num_keys">
<!-- operators and other keys -->
<span id="key1" onClick="AddDigit('1')">1</span>
<span id="key2" onClick="AddDigit('2')">2</span>
<span id="key3" onClick="AddDigit('3')">3</span>
<span id="key4" onClick="AddDigit('4')">4</span>
<span id="key5" onClick="AddDigit('5')">5</span>
<span id="key6" onClick="AddDigit('6')">6</span>
<span id="key7" onClick="AddDigit('7')">7</span>
<span id="key8" onClick="AddDigit('8')">8</span>
<span id="key9" onClick="AddDigit('9')">9</span>
<span id="key0" onClick="AddDigit('0')" style="width: 200px;">0</span>
<span id="keyback" class="clear" onClick="RemoveDigit()"> <div class="num_xBox">X</div></span>
</div>
</div>
</form>
var text = "DD/MM/YYYY";
$(".textbox").on("focus blur", function(){
$(".wrapper").toggleClass("focused");
});
$(".wrapper").click(function (e) {
if (e.target == this) {
var b = $(".textbox", this).focus();
}
}).trigger("click");
$(".wrapper > .textbox").on("input", function(){
var ipt = $(this).text().replace(/\u00A0/g, " ");
$(".gray").text(text.substr(ipt.length, text.length));
}).trigger("input");
check this fiddle http://jsfiddle.net/7sD2r/22/
If ive understood all well. I think the one solution is to store user input in hidden field. Then get this input to split digits and return to visible input value that consists of splitted values etc.