Question

有没有办法在div中显示表单预设值，同时还显示用户的新输入？

我使用此代码的最后一个：

<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>

JS：

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

但是对于某些形式，该值已经设置，我还需要显示它们。

提前致谢！

Answer 1

但是对于某些形式，价值已经设定，我需要将它们显示为aswel

你应该添加：

git pull

在document.getElementById('printchatbox').innerHTML = inputBox.value;事件之前。

＆＃13;

onkeyup

＆＃13;

var inputBox = document.getElementById('chatinput');
document.getElementById('printchatbox').innerHTML = inputBox.value;

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

＆＃13;

希望这有帮助。

Answer 2

你可以这样做。只需在脚本标记中直接添加document.getElementById('printchatbox').innerHTML = inputBox.value此行。

<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>

<script>
    var inputBox = document.getElementById('chatinput');

    inputBox.onkeyup = function () {
        document.getElementById('printchatbox').innerHTML = inputBox.value;
    }

    document.getElementById('printchatbox').innerHTML = inputBox.value;
</script>

Answer 3

首先使用jQuery，因为你应该。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

HTML

<input type="text" name="my_input" id="my_input" value="">

<div id="current_value">
    <!-- We'll put the value here -->
</div>

JavaScript

<script type="text/javascript">

    // Check current set value and update div HTML
    $( document ).ready( function() {

        $('#current_value').html($('#my_input').val());

    });

    // On change, update the div HTML
    $( document ).on('keyup', '#my_input', function() {

        $('#current_value').html($(this).val());

    });

</script>

那应该为你做 - 这就是codepen：http://codepen.io/anon/pen/yeVQVe

在div中显示表单值

3 个答案:

HTML

JavaScript