Question

F.e我有div，其中id是someDiv，输入文本的id是someInput - 如何做输入对象的值将在DIV中实时显示？如果我在输入中键入字母“a”，它应自动显示在DIV中。我应该使用哪种功能？我是jQuery的真正开始。

我找到了这段代码：

$(function() {
    $('#someInput').keyup(function() {
        $('#someDiv').text($(this).val());
    });
});

Answer 1

使用input事件

＆＃13;

$(function() {
  $('#someInput').on("input", function() {
    $('#someDiv').text($(this).val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="someInput">
<div id="someDiv"></div>

＆＃13;

Answer 2

111 | Apple | Ball |Cat

222 | Air   | Badge|Car

Answer 3

你可以检查这段代码，当你键入它时，这个值将显示在内容div中，这样你也可以输入像按键，更改等事件

＆＃13;

 $('#someInput').keyup(function () {
        $('#yourinput').show();
        //  var dev = $(this).val();
        $('#yourinput').html($(this).val());
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter Text :<input id="someInput" type="text"/>
<div id="yourinput" style="display: none;border: 1px solid #ccc;margin-top:10px;">
</div>

＆＃13;

了解更多信息

https://www.w3schools.com/jquery/event_keyup.asp

Answer 4

Vanilla Javascript替代：

在addEventListener()上发生指定的事件类型（例如：keydown）时，使用EventTarget方法调用回调函数。

ES5：

var INPUT_EL  = document.getElementById('UI_input'),
    OUTPUT_EL = document.getElementById('UI_output');

function updateText() {
  OUTPUT_EL.innerHTML = INPUT_EL.value;
}

INPUT_EL.addEventListener('keydown', updateText);

var INPUT_EL  = document.getElementById('UI_input'),
    OUTPUT_EL = document.getElementById('UI_output');

function updateText() {
  OUTPUT_EL.innerHTML = INPUT_EL.value;
}

INPUT_EL.addEventListener('keydown', updateText);

<body>
  <input type="text" id="UI_input" value="test value">
  <div id="UI_output">this is sample</div>
</body>

ES6：

const INPUT_EL  = document.getElementById('UI_input');
const OUTPUT_EL = document.getElementById('UI_output');

let updateText = () => OUTPUT_EL.innerHTML = INPUT_EL.value;

INPUT_EL.addEventListener('keydown', updateText);

const INPUT_EL  = document.getElementById('UI_input');
const OUTPUT_EL = document.getElementById('UI_output');

let updateText = () => OUTPUT_EL.innerHTML = INPUT_EL.value;

INPUT_EL.addEventListener('keydown', updateText);

<body>
  <input type="text" id="UI_input" value="test value">
  <div id="UI_output">this is sample</div>
</body>

如何实时显示DIV对象中的输入值

4 个答案: