Question

在问这个问题之前，我搜索了很多这个功能，但没有发现任何线索，所以这就是发布新问题的原因。

所以实际上我在html文本字段中有一个占位符文本，就像这样

A input field with placeholder text

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

所以我想要的是让这个占位符闪烁。因此可以在html中或使用jquery或javascript。

Answer 1

您可以使用简单的CSS动画执行此操作。不确定，这是多少跨浏览器兼容。适用于Chrome和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; }
}

小提琴：http://jsfiddle.net/rkwa19se/6/

Answer 2

以下是一种仅限jQuery的方法：

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="blinker()">
  <input type="text" onclick="blinker()" class="timepicker" placeholder="Placeholder Text...">
</body>

使html文本字段内的占位符文本闪烁

2 个答案: