admin管理员组

文章数量:1305142

Before asking this question I searched a lot for this functionality but did'nt find any clue so that's why posting a new question.

So actually I have a placeholder text inside an html text field like this

<input type="text" class="timepicker" placeholder="Placeholder Text..." >

So what I want is to make this placeholder blink. So is it possible in html or by using jquery or javascript.

Before asking this question I searched a lot for this functionality but did'nt find any clue so that's why posting a new question.

So actually I have a placeholder text inside an html text field like this

<input type="text" class="timepicker" placeholder="Placeholder Text..." >

So what I want is to make this placeholder blink. So is it possible in html or by using jquery or javascript.

  • javascript
  • jquery
  • html
  • html-input
Share Improve this question edited Dec 24, 2014 at 14:41 try-catch-finally 7,6346 gold badges49 silver badges71 bronze badges asked Dec 24, 2014 at 14:34 Nikhil AgrawalNikhil Agrawal 26.6k21 gold badges92 silver badges127 bronze badges 2
  • How about using css animations? – stranger4js Commented Dec 24, 2014 at 14:49
  • this is a jQuery kind of workaround that should work on all OS/browsers which support placeholder attribute but this is really a 'poor' solution pares too @dr_dev's answer: jsfiddle/jda339up – A. Wolff Commented Dec 24, 2014 at 15:16
Add a ment  | 

2 Answers 2

Reset to default 7

You can do this with simple CSS animations. Not sure, how much cross-browser patible this is though. Works fine with Chrome and Firefox.

HTML:

<input type="text" placeholder="Enter Text Here" class="textbox">

CSS:

input[class="textbox"]::-webkit-input-placeholder {
    color:blue;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

input[class="textbox"]::-moz-placeholder { 
    color:blue;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite; 
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

Fiddle: http://jsfiddle/rkwa19se/6/

Here's a jQuery-only way to do this:

function blinker() {

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

  setTimeout(blinker, 1000);

}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="blinker()">
  <input type="text" onclick="blinker()" class="timepicker" placeholder="Placeholder Text...">
</body>

本文标签： javascriptMake placeholder text inside html text field blinkStack Overflow

版权声明：本文标题：javascript - Make placeholder text inside html text field blink - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741775916a2397024.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。