如何使文本区域动态更改？ [关闭]答案

【问题标题】：How do I make a textarea dynamically change? [closed]如何使文本区域动态更改？ [关闭]
【发布时间】：2014-02-18 16:44:47
【问题描述】：

我正在开发一款黑客模拟游戏，每个用户都会拥有一些虚假的日志文件。我的问题是，我将如何动态更新 HTML 文本区域以显示它们？我打算尝试 mySQL，但我认为它不会起作用，因为“日志”相当大并且可能超过行大小限制。 javascript会是一种选择吗？谢谢。

【问题讨论】：

MySQL 是服务器端，Javascript 和 textarea 是客户端，所以 mysql 不会在这里真正应用，您可以动态执行此操作，您可以使用 javascript AJAX，然后在数据更改时调整 textarea 的大小。跨度>
这个问题非常广泛。是的，这将是一个选项，但您没有明确详细说明您正在尝试做什么，也没有提供任何信息说明您可能已经尝试过什么以及哪些没有奏效。

标签： javascript php html mysql textarea

【解决方案1】：

你试过了吗？

document.getElementById('myTextarea').value = '';

<textarea id="myTextarea">
Text that changes
</textarea>

【讨论】：

还没有，我不太懂JS，但是我懂很多php。我会试试看。感谢您的建议。
$("#myTextarea").val('Text that changes') for jquery

【解决方案2】：

您应该看看像Rivets 这样的声明式2 路绑定框架。像这样的框架允许您使用将它们“绑定”到数据的属性来注释 HTML，这样当您更新数据时，您的 HTML 会自动更改。如果您愿意，有一些适配器可以让您将其与 Backbone 和其他框架一起使用。

这与 Knockout、Angular 和 D3 等事物背后的概念相同。

这是铆钉的一个例子

<section id="auction">
  <h1>{ action.title }</h1>
  <img rv-src="action.image.url">

  <aside rv-show='auction.remaining | lt 120'>
    <h4>Hurry up!<h4>
    <p>This auction is ending in { auction.remaining | time }.</p>
  </aside>

  <button rv-on-click="controller.bid">Place a bid</button>
</section>

实际绑定的 JavaScript

rivets.bind($('#auction'), {
  auction: auctionModel,
  controller: controllerObject
})

【讨论】：

【解决方案3】：

更新 - 用于没有 jQuery 的纯 javascript

HTML

<textarea id="text" rows="4" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all
    web development technologies. Right now, the rows is set to 4 and you will be able to 
    change     them to either 2 or 7 by pressing the appropriate buttons
</textarea>
<br />
<button id="change2" onClick="changeRows2()" type="button">Change Rows to 2</button>
<button id="change7" onClick="changeRows7()" type="button">Change Rows to 7</button>

JavaScript

changeRows2 = function(){
    document.getElementById('text').rows = 2;
}

changeRows7 = function(){
    document.getElementById('text').rows = 7;
}

将原始小提琴更新为仅使用 javascript - jsfiddle showing how to do it

原答案

您必须使用 javascript。

HTML

<textarea id="text" rows="4" cols="50">
This is going to be the placeholder text that you will change dynamically.  I set the rows to 4 and then you can change them to 2 or 7.  Hope this helps.
</textarea>
<br />
<button id="change2" type="button">Change to 2</button>

<button id="change7" type="button">Change to 7</button>

Javascript

$(function(){
    $('#change2').on('click', function(){
        $('#text').attr('rows', 2);
    });

    $('#change7').on('click', function(){
        $('#text').attr('rows', 7);
    });
});

这是一个展示如何做到这一点的小提琴。

Dynamically change rows

我在本例中使用按钮来操作文本区域，但您可以在 ajax 调用的成功回调中使用相同的代码行。

【讨论】：

这是 jQuery，而不是 javascript。但是使用 jQuery 是有效的。目前尚不清楚他是在寻找 Javascript 还是 jQuery。但它被标记为 javascript 而不是 jQuery
我想过。我刚刚更新了我的答案，以展示一种纯粹的 JavaScript 方式来做我“认为”OP 想要的事情。