使用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