Html/JS show password in input after Blur/Focus

I have simple form which contains password field:

<input required type="password" value="Insert password" style="color:#888;" onfocus="inputFocus(this)"  onblur="inputBlur(this)">

JS functions are (after click clear and change color..):

function inputFocus(input) {
    if (input.value === input.defaultValue) {
        input.value = "";
        input.style.color = "#000";
    }
}
function inputBlur(input) {
    if (input.value === "") {
        input.value = input.defaultValue;
        input.style.color = "#888";
    }
}
       

If I load page, I want see standard value in input field. For type type="text" it is not problem, but for type="password" I see only dots. I want to see the default value(Insert password), but when the user begins typing a password he must see dots.

How?

Thank you for your reply.

Use the placeholder attribute:

   <input required type="password" placeholder="Insert password" />