HTML Поле ввода, помните местоположение курсора

Question

У меня есть приложение с полем ввода, которое необходимо преобразовать в верхний регистр, как только пользователь вводит символ. Это работает как ожидалось.

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

Перед тем, как проголосовать, я просмотрел сообщения в Stack Overflow и других местах. Не удалось найти правильное решение. Предоставляйте свои отзывы.

JSFiddle Link

$(function() { 
 
    $("#referenceNo").on('keyup change', function(e) { 
 
    $(this).val($(this).val().toUpperCase()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="referenceNo">Reference No</label> 
 
<br/> 
 
<input type="text" id="referenceNo" name="referenceNo" value="HELLO WORLD!" />

Попробуйте ввести символ между "Hello World!", Курсор будет выталкиваться в конце слова. Это требует фиксации ..

Answer 1

Вы можете достичь визуализации с помощью CSS и стоимости отправки на сервер, вы можете использовать JavaScript.

Как: это CSS код

#abc { 
    text-transform: uppercase 
} 

это HTML:

<input class="form-control" type="text" id="abc" /> 

это JavaScript:

$("#abc").on("change", function(){ var x = $("#abc").val().toUpperCase(); }); 

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

Answer 2

Попробуйте это, Вы можете использовать setSelectionRange Работа Fiddle

$(function() { 
    $("#referenceNo").on('keyup change', function (e) {    
     var startPos = this.selectionStart, 
     endPos = this.selectionEnd;  

     $(this).val($(this).val().toUpperCase());  
     // restore cursor 
     this.setSelectionRange(startPos, endPos); 

    }); 
}); 

Также вы можете использовать чистый CSS

#referenceNo { 
    text-transform: uppercase 
    } 

Answer 3

Я предлагаю вам сделать это с помощью CSS. Добавить имущество text-transform к элементу:

#referenceNo { 
    text-transform: uppercase 
} 

Не требуется скрипт.

Fiddle