JS Input Selector

Developer
Size
2,182 Kb
Views
6,072

How do I make an js input selector?

Messing around with a variety of inputs & picking between them. What is a js input selector? How do you make a js input selector? This script and codes were developed by Matt Gross on 03 January 2023, Tuesday.

JS Input Selector Previews

JS Input Selector - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Input Selector</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="stuff"> <div class="selectors"></div> <div class="items"> <div class="input text"><input type="text" /></div> <div class="input file"><input type="file" /></div> <div class="input range"><input type="range" /></div> <div class="input time"><input type="time" /></div> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JS Input Selector - Script Codes CSS Codes

.selectors, .items { display: inline-block; vertical-align: top; padding: 20px;
}
.selectors { background: #eee;
}
.items { border: 1px solid #ddd;
}
.input { padding: 20px;
}
.input.hidden { display: none;
}
.selector { padding: 10px 20px; margin-bottom: 5px; background: #fff; cursor: pointer; -webkit-transition: .3s ease; transition: .3s ease;
}
.selector.active { background: rgb(215, 93, 93); color: #fff;
}

JS Input Selector - Script Codes JS Codes

var $container = $('.stuff');
$(document.body).ready(function() { console.log('ready'); $('.input').each(function() { //find the input type var $inputType = $(this).find('> input').attr( "type" ); //create a div with a 'blargh' of that input type $('.selectors').append("<div class='selector " + $inputType + "' blargh='"+ $inputType +"'>" + $inputType + "</div>") $('.items > .input').addClass('hidden'); }); $('.selector').click(function() { var $class = $(this).attr( "blargh" ), $input = "stuff"; $('.selector').removeClass('active'); $('.items > .input').removeClass('active').addClass('hidden'); $(this).addClass('active'); $('.items > .input.' + $class).addClass('active').removeClass('hidden'); });
});
JS Input Selector - Script Codes
JS Input Selector - Script Codes
Home Page Home
Developer Matt Gross
Username mattgrosswork
Uploaded January 03, 2023
Rating 3
Size 2,182 Kb
Views 6,072
Do you need developer help for JS Input Selector?

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!

Matt Gross (mattgrosswork) Script Codes
Create amazing Facebook ads 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!