How can i disable/remove white spaces only at the beginning of text inside an input field when someone paste text using javascript or jquery?

Question

I have an input field and i am using the following code to prevent users of adding white spaces only at the beginning of the text. How can i make it also so if someone copy and paste text that has white spaces at the first place of the text in the input to remove those spaces?

Here's my code:

$('.locField').on('keydown', function(e) {
  if (e.which === 32 &&  e.target.selectionStart === 0) {
  return false;
  }  
});

.myform { 
background:#eee;
padding:15px;
width:100%;
}
.locField {
width:80%;
padding:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myform"><input placeholder="Try to add a space at the beggining..." type="text" class="locField"/> </div>

PS: To make my question more clear, please do not suggest me to use the ".trim" function as i want to remove the white spaces ONLY at the beginning of the text.

duplicate https://stackoverflow.com/questions/360491/how-do-i-strip-white-space-when-grabbing-text-with-jquery?rq=1 — CWill, Sep 25 '18 at 19:11
It's not a duplicate. His question is about the `.trim()` js method. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim <-- removes whitespace from beginning and end of string — Iskandar Reza, Sep 25 '18 at 19:20
@I.R.R. exactly. I want to remove white space ONLY from the beggining. — Designer, Sep 25 '18 at 19:21
Oh if its ONLY the spaces before the string, assuming `str` is the string, this the code: `str.replace(/^\s+/g, '');`. Here's where you can play with Regex to test: https://www.regextester.com/ . That regex means `match if it begins with one or more whitespace characters, replace with nothing'. — Iskandar Reza, Sep 25 '18 at 19:25

Designer · Accepted Answer · 2018-09-26T08:51:15.533

ok based on the suggestion of @I. R. R. this is the code that worked for me:

 $('.locField').on('keydown', function(e) {
  if (e.which === 32 &&  e.target.selectionStart === 0) {
  return false;
  }  
});

$('.locField').on("input", function () {
  $(this).val($(this).val().replace(/^\s+/g, ''));
 });

.myform { 
background:#eee;
padding:15px;
width:100%;
}
.locField {
width:80%;
padding:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myform"><input placeholder="Try to add a space at the beggining..." type="text" class="locField"/> </div>

score 0 · Answer 2 · answered Sep 25 '18 at 19:30

0

Listen to the input event, and then trim the spaces at the beginning with a replace using regex.

const input = document.getElementById('test');

input.addEventListener('input', (event) => {
    input.value = input.value.replace(/^\s*(.*)$/, (wholeString, captureGroup) => captureGroup);
});

Here's a fiddle that demonstrates it

answered Sep 25 '18 at 19:30

Jack

804
7
18

1

I would only replace the value if it is there. – epascarello Sep 25 '18 at 19:36

score 0 · Answer 3 · answered Sep 26 '18 at 07:02

0

$("input[type='text'],textarea").on("paste", function (e) {
    var $self = $(this);
    setTimeout(function () {
        $self.val(($self.val().trim()));
    }, 200)
});

answered Sep 26 '18 at 07:02

sukumar2267

130
7

Could you please add some context to your answer? Why is this a solution for the given question? – fabrik Sep 26 '18 at 07:53
if you paste the space it will trim. – sukumar2267 Sep 26 '18 at 08:54

How can i disable/remove white spaces only at the beginning of text inside an input field when someone paste text using javascript or jquery?

3 Answers3