在桌面中将占位符文本显示为标签

Question

我想在移动视图中显示占位符并在桌面视图中隐藏占位符.我怎么能这样做？

结束输入和移动视图应如下所示:

<label>Enter Name:</label>
<input type="text"/>

移动视图应如下所示:

<input type="text" placeholder="Name">

Answer 1

使用 jquery ：

$(document).ready(function(){
    $(window).resize(function(){
        var wid = $(this).width();
        if((wid > 300) && (wid < 400)) {
            $('input[type="text"]').attr('placeholder','name');
            $('label').hide();
        }
        else {
            $('input[type="text"]').attr('placeholder','');
            $('label').show();
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<label>Enter Name:</label>
<input class="int" type="text"/>