如何在输入占位符内输入轮转打印？

我希望我的输入占位符有一个打字旋转木马，像this 如何在输入占位符内输入轮转打印？

我想是dynamic writing在我#myInput占位

 <div class="form-group"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
     <input id="myInput" type="text" class="form-control conference-input"> 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
     </div> 
    </div>

上的任何想法如何有这样做呢？谢谢

来源

2017-08-10 h_h10a

你真的只需要用你的输入元素和文本创建一个新的TxtRotate对象。

new TxtRotate(element, textArray, waitTimeMs);

然后，要在占位符中获取文本，只需在元素上设置占位符文本即可。

this.el.placeholder = this.txt;

var TxtRotate = function(el, toRotate, period) { 
 
    this.toRotate = toRotate; 
 
    this.el = el; 
 
    this.loopNum = 0; 
 
    this.period = parseInt(period, 10) || 2000; 
 
    this.txt = ''; 
 
    this.tick(); 
 
    this.isDeleting = false; 
 
}; 
 

 
TxtRotate.prototype.tick = function() { 
 
    var i = this.loopNum % this.toRotate.length; 
 
    var fullTxt = this.toRotate[i]; 
 

 
    if (this.isDeleting) { 
 
    this.txt = fullTxt.substring(0, this.txt.length - 1); 
 
    } else { 
 
    this.txt = fullTxt.substring(0, this.txt.length + 1); 
 
    } 
 

 
    this.el.placeholder = this.txt; 
 

 
    var that = this; 
 
    var delta = 300 - Math.random() * 100; 
 

 
    if (this.isDeleting) { 
 
    delta /= 2; 
 
    } 
 

 
    if (!this.isDeleting && this.txt === fullTxt) { 
 
    delta = this.period; 
 
    this.isDeleting = true; 
 
    } else if (this.isDeleting && this.txt === '') { 
 
    this.isDeleting = false; 
 
    this.loopNum++; 
 
    delta = 500; 
 
    } 
 

 
    setTimeout(function() { 
 
    that.tick(); 
 
    }, delta); 
 
}; 
 

 
window.onload = function() { 
 
    new TxtRotate(document.getElementById('myInput'), ["PariMaria", "GentianAnnas", "LinneaSteliana", "UlisesCristobal", "SimonidesLonny"], 2000); 
 
};

<div class="form-group"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
 
     <input id="myInput" type="text" class="form-control conference-input"> 
 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
 
    </div> 
 
</div>

来源

2017-08-10 15:22:31

谢谢，但在片段打字旋转木马不在占位符 –

糟糕，我没有意识到你想要什么。我已经更新了我的答案。 –

您链接的示例使用CSS样式来模仿打字插入符号，因此您无法完全做到这一点，但除此之外，您可以使用完全相同的javascript，而不是修改跨度的内部html，而是'正在修改您的输入的placeholder属性。

let input = document.getElementById("myInput"); 
input.placeholder = 'my text';

显然，上述设置占位符静，但没有理由不能使用所提供的示例使用旋转占位符文本相同setTimeout蜱策略。

至于脱字符，我只是使用'管'符号：|。这不是完美的，但它足够接近恕我直言。

来源

2017-08-10 15:19:24 Cappielung

你可以试试这个版本

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
<script> 
var TxtRotate = function(el, toRotate, period) { 
     this.toRotate = toRotate; 
     this.el = el; 
     this.loopNum = 0; 
     this.period = parseInt(period, 10) || 2000; 
     this.txt = ''; 
     this.tick(); 
     this.isDeleting = false; 
    }; 

    TxtRotate.prototype.tick = function() { 

     var i = this.loopNum % this.toRotate.length; 
     var fullTxt = this.toRotate[i]; 

     if (this.isDeleting) { 
     this.txt = fullTxt.substring(0, this.txt.length - 1); 
     } else { 
     this.txt = fullTxt.substring(0, this.txt.length + 1); 
     } 

     this.el.value =this.txt; 

     var that = this; 
     var delta = 300 - Math.random() * 100; 

     if (this.isDeleting) { delta /= 2; } 

     if (!this.isDeleting && this.txt === fullTxt) { 
     delta = this.period; 
     this.isDeleting = true; 
     } else if (this.isDeleting && this.txt === '') { 
     this.isDeleting = false; 
     this.loopNum++; 
     delta = 500; 
     } 

     setTimeout(function() { 
     that.tick(); 
     }, delta); 
    }; 

    window.onload = function() { 
     var element = document.getElementById('myInput'); 
     var toRotate = element.getAttribute('data-rotate'); 
     var period = element.getAttribute('data-period'); 
     new TxtRotate(element, JSON.parse(toRotate), period); 

     } 


</script> 
</head> 
<body> 
    <div class="form-group"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
     <input id="myInput" type="text" class="form-control conference-input" 

    data-period="2000" 
    data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'> 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
     </div> 
    </div> 

</body> 
</html>

来源

2017-08-10 15:32:56 volkinc

您可以重用TxtRotate，修改输入的占位符属性，并添加插入符效果的文本。

var TxtRotate = function(el, toRotate, period) { 
    this.toRotate = toRotate; 
    this.el = el; 
    this.loopNum = 0; 
    this.period = parseInt(period, 10) || 2000; 
    this.txt = ''; 
    this.tick(); 
    this.isDeleting = false; 
}; 

TxtRotate.prototype.tick = function() { 
var i = this.loopNum % this.toRotate.length; 
var fullTxt = this.toRotate[i]; 

if (this.isDeleting) { 
    this.txt = fullTxt.substring(0, this.txt.length - 1); 
} else { 
    this.txt = fullTxt.substring(0, this.txt.length + 1); 
} 

this.el.placeholder = this.txt + '|'; 

var that = this; 
var delta = 300 - Math.random() * 100; 

if (this.isDeleting) { delta /= 2; } 

if (!this.isDeleting && this.txt === fullTxt) { 
    delta = this.period; 
    this.isDeleting = true; 
} else if (this.isDeleting && this.txt === '') { 
    this.isDeleting = false; 
    this.loopNum++; 
    delta = 500; 
} 

setTimeout(function() { 
    that.tick(); 
    }, delta); 
}; 

window.onload = function() { 
    new TxtRotate(document.getElementById('myInput'), [ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ], 2000); 
};

来源

2017-08-10 15:43:12 ashleyr

如何在输入占位符内输入轮转打印？

回答

相关问题