使用JavaScript检索HTML文本框数据的正确方法

Question

假设我有一个简单的HTML页面，如下所示：

<html>
  <head>...</head>

  <body>
    <input type="text" id="mytextarea" />
    <input type="button" id="button1" onClick="..." />
    <input type="button" id="button2" onClick="..." />
  </body>
</html>

考虑到button1和button2会导致对文本的不同操作，在JavaScript函数中以id="mytextarea"访问文本字段中的文本的最佳方法是什么，而无需创建与HTML页面严重耦合的代码？

仅作为示例，假设我期望文本字段中为二进制数，而button1会将其转换为整数十进制数，但是按钮2会将其转换为分数十进制数。 如何在不将JavaScript代码紧密耦合到HTML页面的情况下处理此问题？ 是否有某种方法可以将mytextarea中的数据发送到JavaScript代码，而不必在JavaScript函数本身中使用document.getElementById('mytextarea') ？

也许我应该澄清一下，

我不是在寻找使用getElementById的替代方法，而是在寻找一种编写JavaScript代码的方法，该方法可以在HTML页面中使用文本字段而无需与之耦合。 换句话说，我想知道如何编写JavaScript函数和HTML页面，使得（1）JavaScript函数可以对HTML页面中的数据执行工作，并且（2）JavaScript函数可以移至另一个 HTML页面并在那里使用，而无需更改所述功能。

Answer 1

我认为这是您想要的：

首先创建一个名为textarea的一个对象，可以让你传递一个textarea元素作为参数：

function Textarea(textarea) {
    this.container = textarea;
    this.value = textarea.value
};

然后，您可以添加Textarea object每个实例共享的方法：

Textarea.prototype.ChangeValue = function(){
    console.log( 'Please add your ' + this.value );
};

这样，您可以传递mytextarea并根据需要mytextarea进行修改。 这允许在其他文本区域或需要的其他项目中重用对象中的属性和方法。

t = new Textarea(document.getElementById('mytextarea'));
t.ChangeValue();

演示： http ： //jsfiddle.net/SQ2EC/

Answer 2

由于您需要某种方式来告知功能要操作的元素，因此有两个简单的选项。 您可以在调用函数时将对元素的引用作为参数传递，如

onclick="manipulate(document.getElementById('mytextarea'))"

或者，您可以仅传递id属性值：

onclick="manipulate('mytextarea')"

在这种情况下，该函数将需要使用document.getElementById() ，但要使用其参数，而不是有线字符串。

第一种方法在允许您也以其他方式构造引用的意义上更为灵活，例如document.getElementsByTagName('textarea')[0] 。

您可以通过编写函数来组合方法，以便它可以处理两种参数。 例如，它可以首先检查其参数是否为字符串类型，并在其上使用document.getElementById() ，否则可以将其作为对元素的引用。 而且您可能应该在函数中进行一些完整性检查，测试所获得或构造的内容是否确实是对textarea元素的引用。

Answer 3

我不知道您到底想做什么，但在这里您可以在更改事件中获取文本框的值

<script>
         $(document).ready(function () {
             $('input[id$=mytextarea]').change(function () {
                 alert($(this).val());
                 .............
                 now you have got the value so convert it to decimal and do other stuff
             });
         });
    </script>

使用JavaScript检索HTML文本框数据的正确方法

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-10-26 19:26:00

解决方案2
0 2012-10-26 19:37:55

解决方案3
-2 2012-10-26 19:00:46

使用JavaScript检索HTML文本框数据的正确方法

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-10-26 19:26:00

解决方案2 0 2012-10-26 19:37:55

解决方案3 -2 2012-10-26 19:00:46

解决方案1
1 已采纳 2012-10-26 19:26:00

解决方案2
0 2012-10-26 19:37:55

解决方案3
-2 2012-10-26 19:00:46