Mixing
Trying to create a material design like textbox, issue in input validation
I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.
html css html5 material-design
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
add a comment |
I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.
html css html5 material-design
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44
add a comment |
I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.
html css html5 material-design
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.
html css html5 material-design
html css html5 material-design
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
asked Nov 19 '18 at 23:24
Shibasis SenguptaShibasis Sengupta
14010
14010
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44
add a comment |
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44
add a comment |
1 Answer
1
active
oldest
votes
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384094%2ftrying-to-create-a-material-design-like-textbox-issue-in-input-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
add a comment |
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
add a comment |
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
answered Nov 19 '18 at 23:48
Steve CahnSteve Cahn
868
868
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384094%2ftrying-to-create-a-material-design-like-textbox-issue-in-input-validation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I updated your answer. But its not the answer (I already knew the js answer) I was looking for, so I am not accepting this as an answer
– Shibasis Sengupta
Nov 21 '18 at 4:37
No problem. Thanks!
– Steve Cahn
Nov 21 '18 at 4:40
I mean I have already upvoted your answer.
– Shibasis Sengupta
Nov 21 '18 at 4:43
Figured that's what you meant. All good.
– Steve Cahn
Nov 21 '18 at 4:44