Here is a functional solution
const firstInput = document.getElementById('program'),
secondInput = document.getElementById('program2');
secondInput.value = 'ROS';
function Program() {
secondInput.value = firstInput.value;
}
function handleBlur() {
if (!firstInput.value) {
secondInput.value = firstInput.value = 'ROS';
}
}
<input id="program" name="program1" size="40px" value="ROS" onblur="handleBlur()" onfocus="if(this.value=='ROS'){ this.value='';};" onkeyup="Program();">
<input type="text" id="program2" readonly size="50px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Program()" />
Additional Information
1. Initially set the value (ROS) for the second input and reassign the value to the second input in the onblur event if the first input is empty.
2. You can also check if the value is empty like this: if (!firstInput.value)
This is equivalent to
if (firstInput.value == '' || firstInput.value == undefined || firstInput.value == null)
Update (Including Numerical Values)
It functions as expected (See the example below).
const firstInput = document.getElementById('day1'),
secondInput = document.getElementById('day2');
secondInput.value = '0';
function Day1() {
secondInput.value = firstInput.value;
}
function handleDay1Blur() {
if (!firstInput.value) {
secondInput.value = firstInput.value = '0';
}
}
<input id="day1" size="40px" value="0" onblur="handleDay1Blur()"
onfocus="if (this.value==0) { this.value=''; };" onkeyup="Day1();">
<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()">