如何在輸入佔位符內輸入輪轉打印？

我希望我的輸入佔位符有一個打字旋轉木馬，像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

如何在輸入佔位符內輸入輪轉打印？

回答

相關問題