Здравствуйте. Каким образом можно сделать, чтоб текст, который пользователь вводит в форме, сразу же появляется над формой. Это что-то типа пример, как будет выглядеть текст.
Желательно ссылку на пример подобного. Благодарю за внимание.
Здравствуйте. Каким образом можно сделать, чтоб текст, который пользователь вводит в форме, сразу же появляется над формой. Это что-то типа пример, как будет выглядеть текст.
Желательно ссылку на пример подобного. Благодарю за внимание.
Если используете jQuery
можно сделать например так:
<div class="text"></div>
<form>
<input type="text">
</form>
<script>
var userText;
var $textDiv = $('.text');
var $input = $('input');
$('input').on('input', function() {
userText = $input.val();
$textDiv.html(userText);
});
</script>
Учтите, что событие input
не работает в старых IE
Пример
UPD
Пример для нескольких полей.
HTML
<form action="" id="form">
<textarea name="" id="text" cols="30" rows="10"></textarea>
<div id="preview"></div>
</form>
jQuery
$(document).ready(function(){
function myFunc(){
var input = $("#text").val();
$("#preview").html(input);
}
myFunc();
$('#text').keyup(function(){
myFunc();
});
});
keyup
плох тем, что в поле текст можно вставить правой кнопкой мыши.
– user200141
21 мар '16 в 15:17
ID должны быть названы как имена формы
HTML:
<div class="form-data">
Name:<span id="name"></span>
Age:<span id="age"></span>
</div>
<form action="/" name="form">
<input type="text" name="name">
<input type="text" name="age">
<input type="submit" value="Submit">
</form>
JavaScript:
var form = document.forms['form'];
var formElements = form.elements;
for (var i = formElements.length - 1; i >= 0; i--) {
formElements[i].addEventListener('keyup', function() {
document.querySelector('#' + this.name).textContent = this.value;
})
}
keyup
плох тем, что в поле текст можно вставить правой кнопкой мыши.
– user200141
21 мар '16 в 15:17