How to empty (reset) in JavaScript an input type email after fill it with whitespaces (in.value=“” does...
When fill it an input (type="email") with only whitespaces and want to clean it (value === "") with JavaScript it does not works. Consider the following code (link):
<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>
But the same code with an input type text or password works! I'm testing in Chrome.
EDIT:
Yes, using setAttribute works. But if you do not want to change the input attribute, any solution?
javascript html5 validation user-controls
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
add a comment |
When fill it an input (type="email") with only whitespaces and want to clean it (value === "") with JavaScript it does not works. Consider the following code (link):
<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>
But the same code with an input type text or password works! I'm testing in Chrome.
EDIT:
Yes, using setAttribute works. But if you do not want to change the input attribute, any solution?
javascript html5 validation user-controls
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
That's a really strange interaction, what you're doing works fine with inputtype='text', but for some reason it glitches withtype='email'
– jmcgriz
Jan 2 at 19:33
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:in.value !== in.getAttribute("value")
– csr-nontol
Jan 2 at 23:05
add a comment |
When fill it an input (type="email") with only whitespaces and want to clean it (value === "") with JavaScript it does not works. Consider the following code (link):
<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>
But the same code with an input type text or password works! I'm testing in Chrome.
EDIT:
Yes, using setAttribute works. But if you do not want to change the input attribute, any solution?
javascript html5 validation user-controls
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
When fill it an input (type="email") with only whitespaces and want to clean it (value === "") with JavaScript it does not works. Consider the following code (link):
<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>
But the same code with an input type text or password works! I'm testing in Chrome.
EDIT:
Yes, using setAttribute works. But if you do not want to change the input attribute, any solution?
javascript html5 validation user-controls
javascript html5 validation user-controls
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
edited Jan 2 at 19:35
csr-nontol
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
asked Jan 2 at 19:17
csr-nontolcsr-nontol
66111
66111
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
That's a really strange interaction, what you're doing works fine with inputtype='text', but for some reason it glitches withtype='email'
– jmcgriz
Jan 2 at 19:33
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:in.value !== in.getAttribute("value")
– csr-nontol
Jan 2 at 23:05
add a comment |
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
That's a really strange interaction, what you're doing works fine with inputtype='text', but for some reason it glitches withtype='email'
– jmcgriz
Jan 2 at 19:33
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:in.value !== in.getAttribute("value")
– csr-nontol
Jan 2 at 23:05
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
That's a really strange interaction, what you're doing works fine with input
type='text', but for some reason it glitches with type='email'– jmcgriz
Jan 2 at 19:33
That's a really strange interaction, what you're doing works fine with input
type='text', but for some reason it glitches with type='email'– jmcgriz
Jan 2 at 19:33
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:
in.value !== in.getAttribute("value")– csr-nontol
Jan 2 at 23:05
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:
in.value !== in.getAttribute("value")– csr-nontol
Jan 2 at 23:05
add a comment |
2 Answers
2
active
oldest
votes
Rather than set the value attribute directly, set the "value" attribute of your email input directly by doing the following:
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>This method forces the browser to re-render the input field so that the value presented matches the attribute that is set (ie "").
Why you original method doesn't work; my understanding is that, internally the value DOM attribute of the email input type is "trimmed" meaning reading or setting of a value padded with whitespaces is not distinguished from the same value without whitespaces. Updating the value to "" from " " would therefore be considered an update of the "same value" and would be ignored.
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
add a comment |
Here, the input will be empty if only string.
Edited to reflect observation by Dacre. Setting input.value did not update the actual control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
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%2f54011980%2fhow-to-empty-reset-in-javascript-an-input-type-email-after-fill-it-with-whites%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Rather than set the value attribute directly, set the "value" attribute of your email input directly by doing the following:
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>This method forces the browser to re-render the input field so that the value presented matches the attribute that is set (ie "").
Why you original method doesn't work; my understanding is that, internally the value DOM attribute of the email input type is "trimmed" meaning reading or setting of a value padded with whitespaces is not distinguished from the same value without whitespaces. Updating the value to "" from " " would therefore be considered an update of the "same value" and would be ignored.
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
add a comment |
Rather than set the value attribute directly, set the "value" attribute of your email input directly by doing the following:
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>This method forces the browser to re-render the input field so that the value presented matches the attribute that is set (ie "").
Why you original method doesn't work; my understanding is that, internally the value DOM attribute of the email input type is "trimmed" meaning reading or setting of a value padded with whitespaces is not distinguished from the same value without whitespaces. Updating the value to "" from " " would therefore be considered an update of the "same value" and would be ignored.
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
add a comment |
Rather than set the value attribute directly, set the "value" attribute of your email input directly by doing the following:
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>This method forces the browser to re-render the input field so that the value presented matches the attribute that is set (ie "").
Why you original method doesn't work; my understanding is that, internally the value DOM attribute of the email input type is "trimmed" meaning reading or setting of a value padded with whitespaces is not distinguished from the same value without whitespaces. Updating the value to "" from " " would therefore be considered an update of the "same value" and would be ignored.
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
Rather than set the value attribute directly, set the "value" attribute of your email input directly by doing the following:
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>This method forces the browser to re-render the input field so that the value presented matches the attribute that is set (ie "").
Why you original method doesn't work; my understanding is that, internally the value DOM attribute of the email input type is "trimmed" meaning reading or setting of a value padded with whitespaces is not distinguished from the same value without whitespaces. Updating the value to "" from " " would therefore be considered an update of the "same value" and would be ignored.
document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>document.getElementById("btn").addEventListener("click", function() {
// Remove this:
// document.getElementById("myEmail").value = "";
// Replace with this:
document.getElementById("myEmail").setAttribute("value", "");
})E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button id="btn">Try it</button>
<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
edited Jan 2 at 19:44
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
answered Jan 2 at 19:23
Dacre DennyDacre Denny
13.8k41233
13.8k41233
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
add a comment |
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
Yes. It's works. But can you explain why this happens? It's possible to do without change the input attribute?
– csr-nontol
Jan 2 at 19:30
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
@csr-nontol just updated answer - hope that helps :)
– Dacre Denny
Jan 2 at 19:44
add a comment |
Here, the input will be empty if only string.
Edited to reflect observation by Dacre. Setting input.value did not update the actual control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
add a comment |
Here, the input will be empty if only string.
Edited to reflect observation by Dacre. Setting input.value did not update the actual control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
add a comment |
Here, the input will be empty if only string.
Edited to reflect observation by Dacre. Setting input.value did not update the actual control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
Here, the input will be empty if only string.
Edited to reflect observation by Dacre. Setting input.value did not update the actual control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', function() {
let email = document.getElementById('myEmail');
email.setAttribute('value', email.value.trim());
console.log(email.value.length);
});
});<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
edited Jan 2 at 21:03
answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
answered Jan 2 at 19:22
BibbertyBibberty
1,9431315
1,9431315
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
add a comment |
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
This doesn't seem to work in Chrome
– Dacre Denny
Jan 2 at 20:53
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny hmm, I am using Chrome when writing and testing. What error are you seeing?
– Bibberty
Jan 2 at 20:56
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
@DacreDenny edited based on you observation. Correct. The input itself was not being cleared and needed a call to setAttribute instead. Great spot.
– Bibberty
Jan 2 at 21:04
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
you're welcome :)
– Dacre Denny
Jan 2 at 21:37
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%2f54011980%2fhow-to-empty-reset-in-javascript-an-input-type-email-after-fill-it-with-whites%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
You are trying to check if the user has used just whitespace?
– Bibberty
Jan 2 at 19:19
Not. What you say I already know how to do. I'm just want to empty the input.
– csr-nontol
Jan 2 at 19:21
That's a really strange interaction, what you're doing works fine with input
type='text', but for some reason it glitches withtype='email'– jmcgriz
Jan 2 at 19:33
@csr-nontol the attribute is bound to the input. I am not sure what result you are trying to achieve?
– Bibberty
Jan 2 at 21:40
@Bibberty when working with JS there is difference. e.g. - the input is clean, - the user write some text, then:
in.value !== in.getAttribute("value")– csr-nontol
Jan 2 at 23:05