Input [placeholder] Text Effect with JS

• 6,137 Kez Okundu
• Html Css Js
• 0 Yorum
• 2020-01-04 07:31:38

Let's do a nice type effect that you can use in your projects, especially in your search tiles.

First, let's create an input and assign a class in it.

<input type="text" class="searchBox">

I used the class name as searchBox. Let's pay attention to this in the codes we will write in the future.

Now let's move on to our javascript codes.

obj = {
	searchTxt: [
		"Merhaba, Hoşgeldiniz. ",
		"Ne Aramıştınız ? ",
		"Aradığınızı Birlikte Bulalım :) "
	],
	hasFocus:false
}
// Burada obje tanımladık ve iki adet özellik atadık.

if(obj.searchTxt !== null && obj.searchTxt !== "undefined"){
	var i = 0, ct = 0, searchBox = document.querySelector(".searchBox"); obj.typeIt;
//Kullanacağımız inputu bulduk ve değişkenlerimizi atadık.

	function type(){
		obj.typeIt = obj.searchTxt[ct].slice(0, ++i);
		if(obj.typeIt === obj.searchTxt[ct]){
			i = 0;
			if(ct === obj.searchTxt.length-1){
				ct = 0;
			}else{
				++ct;
			}
			return;
		};
		searchBox.setAttribute("placeholder", obj.typeIt);
		setTimeout(type, 80);
	};
	type();
//Obje nin içinde bulunan cümleleri birer harf kaydırarak placeholder içine yazıyoruz. 
//Her 80 ms de bir bu işlemi yapıyoruz.

    
	$(window).on({
		focus: function(){ obj.hasFocus = true; },
		blur: function(){ obj.hasFocus = false; }
	}).trigger("focus");
//pencere odaklandığında yazma işlemi devam ediyor odaktan çıktığında ise yazma işlemi duruyor.

    setInterval(function(){
        if(obj.hasFocus){
        	type();
        };
    }, 10000);
//odak işemi değişim süresini ve sonraki cümleye geçiş süresini de 10000 ms olarak kontrol ediyoruz.
};

That's all we've processed. To sum up what we've written; When the page loads or focuses on the sentences we define into the object, we write each letter individually into the placeholder at 80 ms intervals, and we set our inter-sentence transition time to 10000 ms or 10 s.

Hope it will be useful...

Stay With Love and knowledge ;)