Disable spaces in Input, AND allow back arrow?
You may add keydown
handler and prevent default action for space key (i.e. 32
):
$("input#UserName").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
DEMO: http://jsfiddle.net/EJFbt/1/
Disable spaces on input not working for devices
Virtual keyboard on mobile devices may give an unexpected value for Event.which, in many cases it will return value 229 (reference caniuse keyboardevent-which).
Event.which is also deprecated. So what you should do is to use the more standard Event.key
. Note that Event.key isn't based on code-number (like 32, 33, 34,...), you must use correct value (see more at MDN KeyboardEvent.key).
So your example should be corrected into something like this: e.key === " "
Disable spaces in input field on svelte
Here's a solution where spaces are prevented of being typed and removed from pasted text REPL
<script>
let value
function handleKeydown(event) {
// prevent that a space is typed
if(event.code === 'Space') event.preventDefault()
}
function handleInput(event) {
// remove spaces from pasted text
value = value.replaceAll(' ', '')
}
</script>
<input type="text"
bind:value
on:keydown={handleKeydown}
on:input={handleInput}>
Prevent typing spaces in an HTML text box with jQuery
You could prevent it from being added at all by checking whether the key pressed is the space bar and returning false
if so:
$("input").on("keydown", function (e) {
return e.which !== 32;
});
Here's a working example.
How prevent whitespace in input field with plain javascript
Use event.preventDefault to prevent its default behavior.
var field = document.querySelector('[name="username"]');
field.addEventListener('keypress', function ( event ) { var key = event.keyCode; if (key === 32) { event.preventDefault(); }});
<input type="text" name="username" />
HTML Input field: remove spaces with jQuery 3.2.1
You need to add your js code after the DOM element has been created (so just before the closing body tag in your example), or use a "$function" declaration. Otherwise, when $("input#UserName") is evaluated, there is no input created yet and thus the handler won't be attached
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("input#UserName").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
})
</script>
</head>
<body>
Enter your username: <input id="UserName" name="UserName" type="text" />
</body>
</html>
How to excludes spaces as a user input?
To remove spaces at the beginning or/and end of a string, use str.trim()
, to remove all spaces, use a regex with str.replace
:
str.replace(/( )/g, "");
Disable submit button if input field is blank or user enter empty spaces
trim() your strings
You can call trim()
on a string to remove empty space before and after.
See snippet with the modified code:
$("#edit-title-input").on("keyup", stateHandle);
function stateHandle(e) {
console.log('input value vs. input value.trim()', '"' + e.target.value + '"', '"' + e.target.value.trim() + '"');
if ($("#title").text() == e.target.value || e.target.value.trim().length == 0) {
$('#edit-submit').prop('disabled', true);
} else {
$('#edit-submit').prop('disabled', false);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="edit-title-input"><br>
<button id="edit-submit">Submit</button>
VueJS - disable space in input text
You can directly prevent that the user adds a white space to your input field. preventDefault()
tells the user agent that the default action should not be taken as it normally would be.
<input @keydown.space="(event) => event.preventDefault()">
Or to make it even shorter (as Sovalina pointed out):
<input @keydown.space.prevent>
Related Topics
Infinite Scrolling with React Js
Google Chrome Copy CSS Path in Developer Tools
Something Similar to Treegrid in Jqgrid
Removing Legend on Charts with Chart.Js V2
Overlay Play Button Over Video
How to Use Jquery to Remove/Negate CSS !Important Rule
Parse CSS Gradient Rule with JavaScript Regex
How to Calculate Descender Height in JavaScript
Bug with Chrome's Localstorage Implementation
Impossible to Hide Navigation Bars in Safari iOS 7 for Iphone/Ipod Touch
Safari Bug :First-Child Doesn't Update Display:Block When Items Are Removed with Js
Fontawesome Fails to Load Fonts Locally and in Electron App