Question

我有这段代码

<span></span>

和这个

<div> variable like a number </div>

和

<script>

$(document).ready(function(){
  var x = $('div').html();
  $('span').html(x)
});

</script>

我需要每次更改div值时，跨度都会反映div的变化

例如。

如果我在div中键入1，则跨度应立即显示为1

如果我在div中键入3283，则跨度应立即显示数字3283

但是使用此代码 - 我需要创建

$("div").click(function(){

      var x = $('div').html();
      $('span').html(x)

});

我不想使用.click(function)。需要此功能自动运行

你的回答后我用这个代码

http://jsfiddle.net/Danin_Na/uuo8yht1/3/

但不起作用。这个问题是什么？

Answer 1

这很简单。如果您将contenteditable属性添加到div，则可以使用keyup事件：

＆＃13;

var div = $('div'),
    span = $('span');

span.html(div.html());

div.on('keyup', function() {
    span.html(div.html());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span></span>
<div contenteditable="true"> variable like a number </div>

＆＃13;

Answer 2

  $("input[type=text]").change(function(){

      var x = $('div').html();
      $('span').text(x)

  });

这可以与textbox或textarea一起使用，因为div用户无法输入文本。

http://jsfiddle.net/uuo8yht1/

Answer 3

您需要一个密钥监听器，jquery提供.keypress()，示例在keypress文档中提供。

我建议通过jquery或.on()库查找.keyup()和throttle/debounce的组合，或者underscore.js。

延迟的一个原因或需要防止过多的事件调用，这会影响性能。

以下是有关throttle and keyup

的其他问题的代码示例

希望这会有所帮助。

Answer 4

这是一个带有输入的demo：

HTML：

<span></span>
<input type="text" id="input01">

JS：

$(document).ready(function(){
   $( "#input01" ).on('keyup',function() {
     var x = parseFloat($('#input01').val());
     $('span').html(x)
   });  
});

Answer 5

如何在浏览器的div元素中编辑？它必须是任何输入类型，然后才能编辑或更改值。

因此，单击该div时，您必须在该位置显示一些输入/ textarea，并且在该输入的更改事件中，您可以更新span中的输入值。

    <div id="main-div">
   <input type="text" id="input-box"  /> 
   </div>

    <script>

$(document).ready(function(){
    $('#input-box').change(function(){
        $('span').html($(this).text)
    });

});

</script>

Answer 6

.change()不适用于DIV元素。由于您没有指定DIV的更新方式，我建议您设置计时器或使用.keypress()

计时器示例：

$(function(){
  var oldVal = "";
  var divEl = $("div");
  setInterval(function(){
    var elTxt = divEl.text();
    if (elTxt != oldVal) {
      oldVal = elTxt;
      $("span").text(elTxt);
    }
  }, 50);
});

输入后立即获取变量

6 个答案: