How to create a text box with some placeholder which disappears on click?

[sariga.vr@bdb.ai]

<style>input:focus {outline:none;}::placeholder {color: #6a6b70;}</style><input id="Target_filter_search01" autocomplete="off" placeholder="Enter Customer MSIDN/MSISDN range here....." style = "width: 100%; height : 100%; padding :0px 0px 0px 10px; color : #6a6b70; border : 0px; border-radius: 4px; background : #f2f0f0;"/> <style> input:focus { outline:none; } </style> <script> //debugger; var inp = document.getElementById("Target_filter_search01"); inp.addEventListener("keyup", function(event) { if (event.keyCode === 13) { //alert('l'); var a = $('#Target_filter_search01').val(); </script>

 Using this code we can create a textbox with placeholder. We have to write the text which should be displayed as a placeholder in that place where it is marked with yellow color.