Cycled placeholders

Developer
Alan Shortis
Size
2,454 Kb
Views
8,096
  1. Cycled placeholders Previews
  2. Cycled placeholders HTML Codes
  3. Cycled placeholders CSS Codes
  4. Cycled placeholders JS Codes

How do I make an cycled placeholders?

What is a cycled placeholders? How do you make a cycled placeholders? This script and codes were developed by Alan Shortis on 22 December 2022, Thursday.

Cycled placeholders Previews
IQ Test

Cycled placeholders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cycled placeholders</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="text" id="js--cycle-placeholder" data-placeholder-text="Search by" data-placeholders="Name, Place, Date"> <script src="js/index.js"></script>
</body>
</html>

Cycled placeholders - Script Codes CSS Codes

body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #333;
}
input { background: rgba(255, 255, 255, 0.25); border: 0; padding: .5rem; width: 25%; font-size: 1.25rem; font-family: Helvetica, Arial, sans-serif; color: white;
}
input::placeholder { color: rgba(0, 0, 0, 0.5); transition: color 0.5s ease;
}
input:focus { outline: 0;
}
input.faded::placeholder { color: rgba(255, 255, 255, 0);
}

Cycled placeholders - Script Codes JS Codes

const inputElement = document.getElementById('js--cycle-placeholder');
const placeholderText = inputElement.dataset.placeholderText;
const placeholders = inputElement.dataset.placeholders.split(', ')
let index = 1;
function switchPlaceholder() { if (index === placeholders.length) { index = 0; } inputElement.classList.add('faded'); setTimeout(() => { inputElement.placeholder = `${placeholderText} ${placeholders[index]}...`; inputElement.classList.remove('faded'); index++; }, 500);
}
inputElement.placeholder = `Search by ${placeholders[0]}...`;
setInterval(switchPlaceholder, 2000);
Cycled placeholders - Script Codes
Cycled placeholders - Script Codes
Home Page Home
Developer Alan Shortis
Username alanshortis
Uploaded December 22, 2022
Rating 3
Size 2,454 Kb
Views 8,096
Do you need developer help for Cycled placeholders?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alan Shortis (alanshortis) Script Codes
Name
CSS Tooltips
Subtle animated gradient background
List filter toggle thing
Scope Bar
Toggle Buttons
Count up
Responsive Grid
Orb 2
Dropbox logo with CSS Grid
Single div CSS loaders
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!