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>

在JavaScript函数中使用id="mytextarea"访问文本字段中文本的最佳方法是什么，而不会创建与HTML页面紧密耦合的代码，因为知道button1和button2会导致不同的操作文本？

举个例子，假设我期望文本字段中有二进制数，而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并根据需要进行修改。这允许在您需要的其他textareas或其他项目中重用对象中的属性和方法。

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 个答案: