Disable Spaces in Input, and Allow Back Arrow

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



Leave a reply



Submit