如何在输入后更改textNodes中的所有文本

时间:2015-05-30 15:01:36

标签: javascript jquery dom

我需要在输入中使用输入的文本更改DOMnodes中的所有文本。 我怎么能这样做?

$('#lc-change-all-values').keyup(function(){
     $('body *').text($(this).val())// How I can do it?
});

任何网页都应允许此代码。我使用谷歌Chrome扩展程序。我的HTML:

<h1>BrowsingData API Sample</h1>
<div role="main">
  <form>
    <label for="timeframe">Remove all browsing data from:</label>
    <select id="timeframe">
      <option value="hour">the past hour</option>
      <option value="day">the past day</option>
      <option value="week">the past week</option>
      <option value="4weeks">the past four weeks</option>
      <option value="forever">the beginning of time</option>
    </select>
    <button id="button">OBLITERATE!</button>
  </form>
</div>

我需要得到像这样的HTML代码:

<h1>My text</h1>
<div role="main">
  <form>
    <label for="timeframe">My text</label>
    <select id="timeframe">
      <option value="hour">My text</option>
      <option value="day">My text</option>
      <option value="week">My text</option>
      <option value="4weeks">My text</option>
      <option value="forever">My text</option>
    </select>
    <button id="button">My text</button>
  </form>
</div>

1 个答案:

答案 0 :(得分:0)

注意,#lc-change-all-values未显示在html

<input type="text" id="lc-change-all-values" />添加到html;特别选择的元素#lc-change-all-values value将被设置为使用.text()

&#13;
&#13;
$("#lc-change-all-values").keyup(function() {
  $("h1, button, label, select option")
  .text(this.value)
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <input type="text" id="lc-change-all-values" />
  <h1>BrowsingData API Sample</h1>
  <div role="main">
    <form>
      <label for="timeframe">Remove all browsing data from:</label>
      <select id="timeframe">
        <option value="hour">the past hour</option>
        <option value="day">the past day</option>
        <option value="week">the past week</option>
        <option value="4weeks">the past four weeks</option>
        <option value="forever">the beginning of time</option>
      </select>
      <button id="button">OBLITERATE!</button>
    </form>
  </div>
</body>
&#13;
&#13;
&#13;