0

I faced with problem, when I have to set placeholder text to input[type="date"].

I've tried this method, but in mobile Safari this doen't work.

Here if fast JsFiddle DEMO

Here if this part of code:

<form>
    <input type="text" placeholder="some date" onfocus="(this.type='date')" onblur="(this.type='text')" />
</form>

Does anybody has thoughts about how to manage this situation?

Community
  • 1
  • 1
Johnny Juarez
  • 248
  • 6
  • 18
  • I've tried this method: [JsFiddle](http://jsfiddle.net/JohnnyJuarez/ragrg8u9/) It seems to work in mobile Safari... but my back's fillings are telling me, that should be another way... – Johnny Juarez Dec 07 '15 at 15:34

1 Answers1

0

I have a stupid advice.I use a div to replace the input whose type is text.The true input of date is display:none; The ios doesnot support this situation,and I try many ways to solve this ,but it's dose not matter. Try the following ways althrough you would not like it.^-^

$(function(){
        document.getElementById('div').addEventListener('click',function(e){
            if(document.getElementById('input').style.display == 'none'){
                document.getElementById('input').style.display = ''
            }
        },false)
        document.getElementById('input').addEventListener('blur',function(e){
            debugger;
            document.getElementById('input').style.display = 'none'
            document.getElementById('div').innerHTML = document.getElementById('input').value;
        })

})
 <div id="div" style="height:47px;border:1px solid #000">
       <input id="input" type="date"  placeholder="some date"    style="display:none;"/>
 </div>
<script type="text/javascript">

$(function(){
        document.getElementById('div').addEventListener('click',function(e){
            if(document.getElementById('input').style.display == 'none'){
                document.getElementById('input').style.display = ''
            }
        },false)
        document.getElementById('input').addEventListener('blur',function(e){
            debugger;
            document.getElementById('input').style.display = 'none'
            document.getElementById('div').innerHTML = document.getElementById('input').value;
        })
})

</script>
栾博文
  • 1