Question

我是初学者编码器，我在使用一个简单的程序时遇到了麻烦，该程序基本上会将您输入的任何内容写入其下方/上方的文本框中。例如，如果您在框中键入“Hello World”，它将在其下方/上方的段落中显示“Hello World”。我当前（错误的）代码是：

<p id="test"></p>
<input id="ipone type="text">
<script>
var x = document.getElementById("ipone").value;
x = test;
document.getElementById("test").innerHTML= document.getElementById("ipone").value;
</script>

我正在努力让它发挥作用，我想尽可能简单小巧。请帮忙。

Answer 1

您需要的事件是oninput，它会触发用户输入，粘贴，剪切等文字。

/* just for demonstration */
#test{
  min-height: 20px;
}

<p id="test"></p>
<input id="ipone" type="text">

$(document).ready(function(){
  //First input file
  $(document).on('change','#file', function(){
    let file = $(this);
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 1</button>';
    
    $('#button').html(button);
    
    $('#button').click(function(){
      console.log('CLICK IN FIRST INPUT FILE!');
    });
    
  });
  
  //Second input file
  $(document).on('change','#file2', function(){
    let file = $(this);
    let nameFile = file[0].files[0].name;
    let button = '<button type="button">Clic input 2</button>';
    
    $('#button2').html(button);
  });
  
  $('#button2').click(function(){
      console.log('CLICK IN SECOND INPUT FILE!');
  });
  
});

Answer 2

我已将代码包装到函数中，并在输入更改时调用该函数

有关该主题的更多信息：Best way to track onchange as-you-type in input type="text"?

＆＃13;

<p id="test"></p>
<input id="ipone" type="text" onchange="update()" onkeypress="update()" />
<script>
function update() {
    var txt = document.getElementById("ipone").value;
    document.getElementById("test").innerHTML= txt;
}
</script>

＆＃13;

Answer 3

<input type="text" id="txtDemo" onchange="myFunction()"/>
<p>Entered Text:<span id="value"></span> </p>
<script>
	function myFunction(){
		var inputValue=document.getElementById("txtDemo").value; 
		var p=document.getElementById("value")
		p.innerHTML=inputValue;
	}
</script>

此代码可以帮助您

如何使用文本框作为常量输入？

3 个答案: