Original Design:
Desired Design:
I want to have a Textbox having Predefined characters SD and users can add another characters or numbers. But SD cannot be deleted nor edited. Is it possible?
Thanks in Advance
You can work around like this
<div style="position:relative">
<input type="text" style="padding-left:25px" />
<span style="position: absolute; padding: 3px 0; left: 5px">SD</span>
</div>
don't forget to change the padding and left values to suit your font and size.
You can experiment a bit with two inputs and removed left / right borders. A quick solution I just created may look like this:
CSS:
input {
border: 1px solid black;
}
input[readonly] {
border-right: 0;
width: 20px;
}
input:not([readonly]) {
border-left: 0;
}
HTML:
<input type="text" value="SD" readonly="readonly"><input type="number" value="123">
Demo: http://dabblet.com/gist/9593231
It is up to you to adapt this to your overall design.
Related
I have an input field in my application and I need to place a permanent label beside entered text in that input field. Also, the styles of the label to be placed are different from that of the entered text. Something like as shown below,
I tried replicating the behavior here. I am able to place a label beside the entered text, but I want the label to also move forward as the characters are being typed in the input box. Currently, my entered text comes on top of the label placed, as shown below-
I found a similar question here, but in the suggested answer, the label doesn't move with the entered text.
How can I achieve this behavior? Thanks a lot in advance!
Styling the label differently from the input is what makes this especially challenging; they'll need to be different DOM nodes, so simpler solutions like input masking will not be sufficient.
You'll need to scale the width of the input based on its content; one way would be to use a normal <input> field and resize it via javascript on every keystroke.
Alternatively, you could use a contentEditable element with display: inline-block to automatically handle the layout; then when you're ready to do something with that value you can read its innerHTML. A simple demonstration is below:
getvalue = () => {
console.log(document.getElementById('input').innerText)
}
.fake_form_input {
border: 1px solid;
paddding: 0.2em;
}
#input {
display: inline-block;
min-width: 1em;
padding: 0.2em;
outline: none;
}
.label {
display: inline-block;
color: red;
}
<div class="fake_form_input">
<div contenteditable id="input">0
</div>
<div class="label">KM</div>
</div>
<button onclick="getvalue()">Go</button>
(Note that this introduces some a11y issues, you'll want to add some ARIA tagging etc if you use this technique)
Give it a try:
const myInput = document.getElementById('inp');
const inputLable = document.querySelector('.inputContainer span');
myInput.addEventListener('keydown', handleLable)
function handleLable(element) {
const charLength = element.target.value.length;
inputLable.style.left = charLength * 9 + 20 < myInput.clientWidth - 40 ? charLength * 9 + 20 + "px" : myInput.clientWidth - 30 + "px";
}
.inputContainer{
position:relative;
width:300px;
}
.inputContainer span{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
color: red;
}
#inp{
width: 100%;
padding-right: 48px;
font-size: 16px;
}
<div class="inputContainer">
<input type="text" id="inp" />
<span>KMs</span>
</div>
I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).
I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:
If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
If there is text, I want the form to be submitted.
Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.
What I've tried:
I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.
I'm wondering how in JS you can control the z-index.
Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.
Any help would be wonderful.
Code:
HTML:
<div id="wrap">
<form id="myForm">
<input id="search" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type="submit">
</form>
</div>
CSS:
#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}
input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}
input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}
JS
var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;
function showOpen()
{
if(search.style.width=="700px")
{
alert("OPEN!");
}
};
search.addEventListener("click", showOpen);
showOpen();
HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/
Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:
<script>
function check(){
value = document.forms["myForm"]["search"].value;
if(value == "" || value == null){
alert("please enter a search term");
return false;
}else{
document.getElementById("myForm").submit();
}
}
</script>
<div id="wrap">
<form id="myForm" onsubmit="return check()">
<input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type = "submit">
</form>
</div>
fiddle: https://jsfiddle.net/q1L3Lstx/1/
It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp
I saw a couple of issues with the code.
search and search_submit are pointing to the wrong items they can be like this:
var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");
You could call a function on submit. like this:
<form id="myForm" onsubmit="myFunction(event)">
finally you can work your code inside that function:
function myFunction(e){
if(search.value.length <= 0){
e.preventDefault();
alert('empty');
}
}
I got this range input in my Ionic Mobile App:
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
With this CSS applied to it:
.custom-range input[type='range']::-webkit-slider-thumb {
width: 20%;
/*display: none;*/
height: 1.6vh;
background: rgb(255,255,255);
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
margin-top: -3px;
border-radius: 5px;
}
Depending on an option I want to hide the thumb but keeping the track. If I comment out display: none; it works. I get range input without the thumb. But I want to do it dynamically based on user interaction.
I really don't know how to interact with input on CSS. I'm using angularJS and javascript but no JQuery (I'll keep it away from my project as long as I can) so I'm looking for a pure js solution.
I read this, this and this among others solution. I'm able to hide the input but not the track or thumb separately.
So I assume .custom-range will be on a parent element right? If so the code could look like this:
<div class='custom-range'>
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
</div>
You could use ng-class to add a class to div.custom-range dynamically:
<div class='custom-range' ng-class="{'disabled-range':isDisabled()}">
....
</div>
and add a bit of css:
.custom-range.disabled-range input[type='range']::-webkit-slider-thumb {
display: none;
}
Haven't tested this .. but I hope it's clear enough.
I'm trying to make a simple typing test application using HTML, CSS and JS. I want to display some placeholder text in the box the user is typing in so that they know exactly what to type as they are typing it. If they mess up, it will become apparent because the placeholder text and input text wont line up. I've spent more than a few hours trying to figure this out and have come up with two sub-par solutions:
HTML:
<div id='test' class="placeholder" data-value="This appears in the box!">
<textarea id="typed" name="typed" cols=50 rows=15></div>
CSS:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 2px;
top: 2px;
content: attr(data-value);
pointer-events: none;
opacity: 0.6;
text-align: left;
}
This works fairly well, but unfortunately, any newline characters are completely ignored, displayed as a space, or displayed literally. I've tried \u000A, \x0A, \r\n, just pressing enter, it doesn't work.
Option two is using the placeholder attribute:
<textarea placeholder="line1
line2" id="typed" name="typed" cols=50 rows=15></textarea>
This displays correctly but as soon as you start typing, it disappears.
Does anyone know of a way to make the standard placeholder text stay permanently, or have some other workaround that formats correctly?
I would stay away from using a data attribute or placeholder text to accomplish this. I think you will find it pretty difficult to include line breaks and cross-browser compatibility if you go that route. What about using 2 absolutely positioned textareas stacked on top of each other? The lower textarea would contain the text the user needs to type and would be disabled and the top one would have a transparent background so you could see the text below. Here's a quick mockup of how that could look:
textarea {
position: absolute;
font-size: 20px;
}
#type {
color: red;
}
#typed {
background: none;
z-index: 10;
}
<div id='test' class="placeholder">
<textarea id="typed" name="typed" cols=50 rows=15></textarea>
<textarea id="type" name="typed" cols=50 rows=15 disabled>
This is the text you have to type.
You can put as many lines as you want.
</textarea>
</div>
JSFiddle
Here is an example.
You were pretty much there, all I've done is wrapped them in a container.
The div and text textarea are both absolutely positioned and share the same font. The placeholder is positioned to take into account the 1px border and the 2px padding on a textarea. These are defaults, if you change them then you'll need to change the placeholder positioning.
.container {
position: relative;
}
textarea
{
position: absolute;
top: 0px;
left: 0px;
}
.placeholder
{
position: absolute;
left: 3px;
top: 3px;
content: attr(data-value);
pointer-events: none;
opacity: 0.6;
text-align: left;
z-index: 1;
}
textarea,
.placeholder {
font-family: arial;
font-size: 16px;
}
You'll notice below that the placeholder div has a <br />in it for the line break. HTML handles line breaks differently from text so your comparison code will have to take this into account:
<div class='container'>
<div id='test' class="placeholder">This text appears<br /> in the box</div>
<textarea id="typed" name="typed" cols=50 rows=15></textarea>
</div>
I have a html page as below,
the tags code is :
<fieldset>
<legend>Tags</legend>
<div>
<label>
<input type="checkbox" name="col" value="summary" checked="checked" />
Name
</label>
......
</div>
</fieldset>
But i want to make the page as below:
In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks
It can be done by first finding all of the legend elements, then assigning an onclick handler. The handler is assigned to the first div found in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.
jsFiddle Demo
window.onload = function(){
var legends = document.getElementsByTagName("legend");
for(var i=0; i<legends.length; i++)
{
legends[i].onclick = function()
{
var myDivs = this.parentNode.getElementsByTagName("div");
var myDiv;
if(myDivs.length > 0)
{
var myDiv = myDivs[0];
if(myDiv.style.display == "")
{
myDiv.style.display = "none"
}
else
{
myDiv.style.display = "";
}
}
}
}
};
In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).
You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:
Jquery:
$(function(){
$('legend').click(function(){
$(this).nextAll('div').toggle();
$(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
});
})
CSS:
.hide{
padding-left: 10px;
background: url('img/down.gif') no-repeat left middle;
}
.show:after{
padding-left: 10px;
background: url('img/up.gif') no-repeat left middle;
}
Fiddle here
I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#title').click(function(){
$('#tags_check').toggle();
});
})
</script>
<style type="text/css">
#content {
position: relative;
padding: 10px;
}
#title {
border: 1px solid grey;
position: absolute;
background-color: #ccc;
top: -5px;
left: 15px;
z-index: 1;
cursor: pointer;
}
#tags_check {
border: 1px solid grey;
position: relative;
z-index: 0;
top: 3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="title">Columns</div>
<div id="tags_check">
<input type="checkbox" name="col" value="summary" checked="checked" /> Name1
<input type="checkbox" name="col" value="summary" checked="checked" /> Name2
</div>
</div>
</body>
I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.
About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!