Как предотвратить ввод начального пробела в текстовое поле?

Вы должны понимать разницу между событиями keyup, keypress и keydown:

• keydown : это первое событие, запускаемое при первом нажатии клавиши
• нажатие клавиши: это когда происходит ввод
• keyup : Когда вы «отпускаете» клавишу

Итак, у вас есть "нажатие клавиши -> нажатие клавиши -> заполнить ввод -> отпустить клавишу"

В вашем сценарии вы хотите, чтобы что-то произошло ДО того, как фактический ввод будет заполнен, поэтому вам нужно использовать событие keydown вместо keyup

Оттуда возврат false приведет к остановке распространения события, поэтому "нажатие клавиши -> // Здесь все сломается // -> нажатие клавиши -> заполнить ввод -> отпустить клавишу"

Последнее — это ваше состояние. В своем коде вы не проверяете, действительно ли firstChar пуст, вы просто каждый раз что-то получаете, потому что получаете значение. Просто немного изменив ваше условие, код заработал.

Вот рабочая демонстрация:

$(document).on("keydown","#hello" ,function(evt){
     var firstChar = $("#hello").val()
     if(evt.keyCode == 32 && firstChar == ""){
     	return false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="hello">

Для последнего пробела вы не можете предсказать, будет ли добавлено второе слово, я думаю, поэтому просто выполните обычную обрезку или, если вы уверены, что будет напечатано только одно слово, просто адаптируйте условие.

ИЗМЕНИТЬ:

После комментария ОП о том, что вы можете ввести пробел, набрав пробел, а затем вернувшись перед первой буквой, ниже приведено исправление, которое помогает.

По сути, теперь я основываю свой код не на «первом символе», а на позиции курсора.

Если курсор находится в позиции 0, мы не позволяем пользователю вводить пробел, в противном случае все в порядке.

Новый код JS выглядит так:

$(document).on("keydown","#hello" ,function(evt){
     var caretPos = $(this)[0].selectionStart
     if(evt.keyCode == 32 && caretPos == 0){
        return false;
     }
});

ИЗМЕНИТЬ 2:

Рик Хичкок комментарий:

$() возвращает коллекцию jQuery. Вы можете получить доступ к отдельному элементу коллекции, обратившись к его индексу ([0], [1], [2], ...). У вас уже есть отдельный элемент (это), и нет необходимости помещать его в коллекцию jQuery, чтобы вы могли сразу же взять его обратно.

Принимая это во внимание, $(this)[0].selectionStart можно заменить на this.selectionStart

Вот один пример предотвращения пробелов в начале и в конце.

 $(document).on("keypress","#s" ,function(evt){
     var firstChar = $("#s").val()
     if(evt.keyCode == 32){
        var cursorPos = $("#s").prop("selectionStart");
        //Prevents spaces in Beginning and more than on at the end
        if(cursorPos == 0 || (cursorPos == firstChar.length && firstChar[firstChar.length-1] == " "))
        {
            evt.preventDefault();
        }
     }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="s">  

вот решение.

просто используйте keydown вместо keyup и в условии firstChar=="" и используйте evt.preventDefault(evt); учитывая приведенный ниже код.

$(document).on("keydown","#s" ,function(evt){    
 var firstChar = $("#s").val();
 if(evt.keyCode == 32 && firstChar==""){
   evt.preventDefault(evt);
   $("#s").val( $("#s").val().trim() )
   console.log(" called ")
   return false;
 }

})