2015-02-12 99 views
1

我想让注视时占位符文本闪烁。如何在输入文本框中聚焦注意占位符

这是我的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

现在我想闪烁占位符文本“请点击这里钥匙链扫描工作“。

那么请任何人都可以帮我吗?

回答

0

这里是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"> 
+0

u能送我的工作它JS小提琴,这里不闪烁,我 – Bhairav 2015-02-12 08:57:41

+0

兄弟是workig .. [http://plnkr.co/edit/XLn9oW5tDSLaDpc4e2W4?p=preview] – Rkn 2015-02-12 09:28:29

+0

嘿嘿的onfocus也是它的闪烁兄弟..我想眨眼它只在聚焦Bro – Bhairav 2015-02-12 09:47:42

0

您正在寻找这样的事情:

<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> 
+0

thanxs作出回应。你可以为上面的代码创建一个jsfiddle,因为它不适合我 – Bhairav 2015-02-12 11:13:17

+0

http://jsfiddle.net/tj9o49tk/,它适用于聚焦 – Dileep 2015-02-12 11:15:55

+0

仍然光标和占位符都闪烁@dileep我不想眨眼他们两个 – Bhairav 2015-02-12 11:16:51

0

看到这个thread,显示如何将其与普通的CSS只是来完成,没有任何JavaScript/jQuery。

@Pinal特别感谢他帮助我使它在Firefox上工作。

相关问题