доступ html вход в реальном времени дисплей в html-элементе

У меня есть два входа, один должен содержать первое имя, а второе - имя нового пользователя. Теперь я хочу показать имя пользователя (firstname.lastname) в реальном времени в a. Но когда я редактирую второй вход, весь текст в изменениях.доступ html вход в реальном времени дисплей в html-элементе

Вот мой код: https://jsfiddle.net/qun74mwc/13/

HTML:

<span id="username"></span><br/><br/> 
<input type="text" name="firstname" /><br/><br/> 
<input type="text" name="lastname" />

Jquery:

var $username = $("#username"); 

$("input[name='firstname']").keyup(function() { 
    $("#username").text(this.value + "."); 
}); 

$("input[name='lastname']").keyup(function() { 
    $("#username").text(this.value); 
});

источник

2016-08-18 T K

Когда вы сделаете это:

.text(this.value)

Вы замените на то, что находится в span, с значением тока. Вместо этого замените его на все вычисленные значения. За что вам нужен только один keyup обработчик на все:

$("input").keyup(function() { 
    var formattedName = $("input[name='firstname']").val() + "." + $("input[name='lastname']").val(); 
    $("#username").text(formattedName); 
});

источник

2016-08-18 15:38:53 David

Спасибо! Вы мне очень помогли. –

Kudos для объяснения реальной проблемы, а не только решения. – benjaminhull

Просто использовать переменные.

var $username = $("#username"); 
var firstName = ''; 
var lastName = ''; 

$("input[name='firstname']").keyup(function() { 
    firstName = this.value; 
    renderUsernameSpan(); 
}); 

$("input[name='lastname']").keyup(function() { 
    lastName = this.value; 
    renderUsernameSpan(); 
}); 

function renderUsernameSpan(){ 
     $("#username").text(firstName + '.' + lastName); 
}

источник

2016-08-18 15:40:16

jsFiddle

$("input[name='firstname'], input[name='lastname']").keyup(function() { 
 
\t var $fnVal = $("input[name='firstname']").val(), 
 
    \t $lnVal = $("input[name='lastname']").val(); 
 
    
 
    $("#username").text($fnVal + "." + $lnVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span id="username"></span><br/><br/> 
 
<input type="text" name="firstname" /><br/><br/> 
 
<input type="text" name="lastname" />

источник

2016-08-18 15:42:00

Это, как я бы решить это:. https://jsfiddle.net/benhull/qun74mwc/23/

function updateText(){ 
    $("#username").text($("input[name='firstname']").val() + "." + $("input[name='lastname']").val()); 
} 

$("input[name='firstname']").keyup(updateText); 
$("input[name='lastname']").keyup(updateText);

источник

2016-08-18 15:42:22 benjaminhull

Дайте идентификаторы для полей ввода (ех же, как и их имена), а затем отредактируйте свои js по адресу:

var $username = $("#username"); 

$("input[name='firstname']").keyup(function() { 
    $("#username").text(this.value + "." + $('#lastname').val()); 
}); 

$("input[name='lastname']").keyup(function() { 
    $("#username").text($('#firstname').val() + "." + this.value); 
});

см https://jsfiddle.net/qun74mwc/25/

источник

2016-08-18 15:42:27

попробовать это, это то, что вы хотите, я думаю,

<html> 
 
<head></head> 
 
<title></title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<body> 
 

 

 
first name : <input type="text" id="firstname"> 
 
last name :<input type="text" id="lasttname"> 
 

 
<h3 class="display"></h3> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
    $("#firstname, #lasttname").on('keyup keydown',function(){ 
 
     $(".display").text(""); 
 

 
     var firstname = $("#firstname").val(); 
 
     var lasttname = $("#lasttname").val(); 
 
     var fullname = firstname+"."+ lasttname; 
 
     //alert(fullname); 
 
     $(".display").append(fullname); 
 
    }); 
 
}); 
 

 
</script> 
 

 
</html>

источник

2016-08-18 15:44:19

Попробуйте это я просто изменил ваш код лил

var $username = $("#username"); 
var fn = "" 
var ln = "" 
$("input[name='firstname']").keyup(function() { 
    fn = this.value + "." 
    $("#username").text(fn + ln); 
}); 

$("input[name='lastname']").keyup(function() { 
    ln = this.value; 
    $("#username").text( fn + ln); 
});

Your code UPDATED

источник

2016-08-18 15:44:28

Стиль Примечание: Это позволит сделать ваш код намного более профессионально и остановить автозаполнение от спама мобильных пользователей с помощью масштабирования пользователей к точке, они не могут даже увидеть, что они печатают в полях формы , плюс не забудьте принять к сведению предыдущие сообщения, чтобы сформировать то, что вы ищете.

Убедитесь, что стиль вашей входной стороны HTML-то вроде этого:

<form autocomplete="off"> 
    First Name:<br><input type="text" name="first_name"><br> 
    Last Name:<br><input type="text" name="last_name"><br> 
</form>

ИЛИ

<form autocomplete="off"> 
    First Name:<br><input type="text" name="firstname"><br> 
    Last Name:<br><input type="text" name="lastname"><br> 
</form>

Вы также можете использовать CDN для загрузки JQuery без необходимости загружать его непосредственно, такие как:

<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</head>

источник

2016-08-18 16:23:53

доступ html вход в реальном времени дисплей в html-элементе

ответ

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