我使用的是JQuery插件Typed.js - http://www.mattboldt.com/demos/typed-js/
但是我无法让插入符号在占位符中闪烁。这是我到目前为止所做的:(希望格式化，我试图做一个主持人为我以前的帖子做的事情！）
HTML：
<div class="search">
<div class="type-wrap">
<input id="typed" placeholder="" required='true' type='text' style="white-space:pre;">
</div>
CSS：
.search {
background: rgba(0, 0, 0, 0.5);
display: flex;
max-width: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 20px;
}
.search input {
max-width: 370px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 20px;
border: 0px;
margin: 12px;
padding: 0px;
}
.search input[type="text"] {
flex: 1;
background: transparent;
font-size: 2.5em;
width:680px;
}
}
.search input:focus {
outline: none;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.search input[type="text"]::-webkit-input-placeholder {
color: white;
}
JavaScript的：
// The MIT License (MIT)
// Tyepd.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
! function ($) {
"use strict";
var Typed = function (el, options) {
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typeSpeed = this.options.typeSpeed;
// add a delay before typing starts
this.startDelay = this.options.startDelay;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 1;
if (this.loop === false) {
// number in which to stop going through array
// set to strings[] array (length - 1) to stop deleting after last string is typed
this.stopArray = this.strings.length - 1;
} else {
this.stopArray = this.strings.length;
}
// All systems go!
this.build();
}
Typed.prototype = {
constructor: Typed
,
init: function () {
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
var self = this;
setTimeout(function () {
// Start typing
self.typewrite(self.string, self.strPos)
}, self.startDelay);
}
,
build: function () {
// Insert cursor
//this.el.after("<span id=\"typed-cursor\">|</span>");
this.init();
}
// pass current string state to each function
,
typewrite: function (curString, curStrPos) {
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// containg entire typing function in a timeout
setTimeout(function () {
// make sure array position is less than array length
if (self.arrayPos < self.strings.length) {
// start typing each new char into existing string
// curString is function arg
// CUSTOM PLACEHOLDER TEXT
self.el.attr("placeholder", curString.substr(0, curStrPos));
// check if current character number is the string's length
// and if the current array position is less than the stopping point
// if so, backspace after backDelay setting
if (curStrPos > curString.length && self.arrayPos < self.stopArray) {
clearTimeout(clear);
var clear = setTimeout(function () {
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else {
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false) {
if (self.arrayPos === self.stopArray && curStrPos === curString.length) {
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false) {
self.arrayPos = 0;
self.init();
} else if (self.loopCount !== false && self.curLoop < self.loopCount) {
self.arrayPos = 0;
self.curLoop = self.curLoop + 1;
self.init();
}
// humanized value for typing
}, humanize);
}
,
backspace: function (curString, curStrPos) {
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
setTimeout(function () {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
// if (self.arrayPos == 1){
// self.stopNum = 14;
// }
//every other time, delete the whole typed string
// else{
// self.stopNum = 0;
// }
// ----- continue important stuff ----- //
// replace text with current text + typed characters
// CUSTOM PLACEHOLDER TEXT
self.el.attr("placeholder", curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum) {
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum) {
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos + 1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
}
// humanized value for typing
}, humanize);
}
}
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this),
data = $this.data('typed'),
options = typeof option == 'object' && option
if (!data) $this.data('typed', (data = new Typed(this, options)))
if (typeof option == 'string') data[option]()
});
}
$.fn.typed.defaults = {
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
// typing and backspacing speed
typeSpeed: 0,
// time before typing starts
startDelay: 0,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// ending callback function
callback: function () {
null
}
}
}(window.jQuery);
////////////////////// MY CODE //////////////////////
$(function () {
$("#typed").typed({
strings: ["testing................................."],
typeSpeed: 200,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
attr: 'placeholder',
backDelay: 500,
loop: false,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function () {
foo();
},
resetCallback: function () {
newTyped();
}
});
$(".reset").click(function () {
$("#typed").typed('reset');
});
});
JSFiddle：http://jsfiddle.net/cv5Lf9L0/4/
编辑：我发现如果我用＆＃34; span id = ...＆＃34;替换输入标签标记插入符闪烁，但不显示任何文本。
答案 0 :(得分：0)
这很简单，你不需要CSS动画。只需添加带引号的空字符串，如下所示：,""
转到您的代码部分：
////////////////////// MY CODE //////////////////////
//-rem0ve everything in here-
并将其替换为：
////////////////////// MY CODE //////////////////////
$(function(){
$("#typed").typed({
strings: ["have a","beautiful day, ""],
typeSpeed: 23
});
$(".reset").click(function () {
$("#typed").typed('reset');
});
});