У меня есть страница, как на изображении ниже 
Для MM/DD/YYYY текста, отображать только тот текст, который не был введен пользователем
По моему требованию, пользователь может вводить цифры с клавиатуры, которая только на странице. Таким образом, поле ввода только для чтения.
Теперь я пытаюсь получить, когда пользователь начинает вводить месяц, тогда другой текст должен оставаться в текстовом поле до тех пор, пока пользователь не наберет его. например 05/DD/YYYY. И соответственно, текст будет скрыт.
Если я разместил местозаполнитель, тогда, когда пользователь начнет вводить цифры, весь текст ушел. Я не хочу этого. Поэтому я принял текст «MM/DD/YYYY» в отдельном 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>С выше Html кода я получаю ниже результат: 
Проблемы наступающем ниже:
Мои цифры собираются под текстом " MM/DD/YYYY». Я не получаю, как мне получить мои цифры над этим текстом
Как скрыть текст, который вводится пользователем, и отображать другие соответственно, например. «MM» должен скрываться, если пользователь вводит 05 и отображает другой текст, подобный этому «05/DD/YYYY».
Может ли кто-нибудь помочь мне в этом?
ПРИМЕЧАНИЕ: С типом ввода = даты или любыми другими плагинами я могу достичь выше функциональности, но мое требование отличается. Я должен достичь этого только с помощью HTML, CSS, JS.
Эффект, который вы ищете, - это «маскирование ввода». Если вы google, есть сотни плагинов, которые сделают это для вас уже –
Да, я знаю, что плагины, но мое требование отличается. Я не могу использовать плагины по умолчанию, так как мое поле ввода только для чтения, и пользователь должен вводить цифры с клавиатуры, которые указаны на странице. Я также упоминаю об этом и в моем вопросе. Поскольку я должен использовать предоставленную клавиатуру только для того, чтобы управлять всеми функциями Javascript (упоминается в вопросе). – anonymous
Я прочитал ваш вопрос. Ни один из этих ограничений не влияет на использование маскирующего плагина. –