2016-09-29 2 views
0

Я хотел бы, после потери фокуса на <input> поле, чтобы выполнить несколько операций на значение этого поля, включая изменение самого содержания (так что в верхнем регистре)Как обновить поле на .focusout()?

В следующем code:

HTML

<input id="name" type="text"></input> 
<div id="upper"></div> 

JavaScript + Jquery

$("#name") 
    .focusout(function() { 
    // get the text from the form which lost focus 
    name = $("#name").val(); 
    // turn it into uppercase 
    name = name.toUpperCase(); 
    // update the form and another entry 
    $("#upper").text(name); 
    $("#name").text(name); 
    }) 

событие правильно поймано, а <div> обновлен строчным текстом. Однако содержимое поля не обновляется.

Можно ли обновить содержимое поля <input> после его оставления?

+1

Изменение 'value' (' .val() ') не текст? http://api.jquery.com/val/ – Pogrindis

+0

'val()' для элементов формы, 'text()' для почти всего остального. –

+1

Не связанные, но я хочу сказать 2 вещи. Во-первых: вы должны определить переменную перед использованием ('var name = ...' или 'let name = ...', а не 'name = ...'). Во-вторых, внутри функции вы можете использовать '$ (this)' вместо повторного вызова '$ ('# name')' –

ответ

1

Изменить текст() на валу() для поля

$("#name").val(name); 
0

Используйте jQuery.val(), чтобы установить значение, не jQuery.text() также отметить this в handler-function относится к Element, на котором event вызывается, следовательно this может быть использован вместо из specified-selector

Вы могли бы попробовать этот упрощенный код:

$("#name").focusout(function() { 
 
    var name = this.value.toUpperCase(); 
 
    $("#upper").text(name); 
 
    $(this).val(name); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input id="name" type="text"></input> 
 
<div id="upper"></div>

Смежные вопросы