Question

我想在焦点上闪烁占位符文本。

这是我的HTML代码：

<input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder=" Please click here to Key Fob scanning work">

这是我的jquery代码：

$('#keyfob').on("focus blur", function(){
    $(this).attr("placeholder") == "" ? $(this).attr("placeholder", "Please click here for Key Fob scanning to work") : $(this).attr("placeholder", "");
});

working js fiddle code

现在我要闪烁占位符文字“请点击此处进行Key Fob扫描工作”。

所以请任何人帮助我???

Answer 1

这里是jquery

function blink() {

if ($('input[type=text]').attr('placeholder')) {
 // get the placeholder text
 $('input[type=text]').attr('placeholder', '');
} 
else {
  $('input[type=text]').attr('placeholder', 'Placeholder Text...');
}
setTimeout(blink, 1000);
}

HTML

<body onload='blink()'>
<input type="text" on-click='blink()' id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder=" Please click here to Key Fob scanning work">

Answer 2

你看起来像这样：

  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var clicked;
        $('#keyfob').focusout(function() {
            var s = $('#keyfob').attr("placeholder");
            clicked=true;
            blinking();    
        });
        $('#keyfob').click(function() {
            clicked=false;
            $('#keyfob').attr("placeholder", '');
        });
        function blinking() {
               if(clicked){
                     $('#keyfob').attr("placeholder", '');
                setTimeout(function() {
                    $('#keyfob').attr("placeholder", 'Please click here to Key Fob scanning work');
                    setTimeout(blinking, 500);
                }, 1000);
            }
        }
      });
   </script>

  </head>

    <body>
         <input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">
   </body>
 </html>

Answer 3

请参阅此thread，其中显示了如何仅使用纯CSS，而不使用任何JavaScript / jQuery。

@Pinal帮助我使用Firefox的特别功劳。

如何在输入文本字段中使聚焦输出处的占位符闪烁

3 个答案: