使用JavaScript检索HTML文本框数据的正确方法
[英]Proper way to retrive HTML textbox data using JavaScript
问题描述
Assuming I have a simple HTML page like the following: 
假设我有一个简单的HTML页面，如下所示：
<html>
<head>...</head>
<body>
<input type="text" id="mytextarea" />
<input type="button" id="button1" onClick="..." />
<input type="button" id="button2" onClick="..." />
</body>
</html>
What is the best way to access the text in the text-field with id="mytextarea" in a JavaScript function, without creating code heavily coupled to the HTML page, given the knowledge that button1 and button2 cause different manipulations on the text? 考虑到button1和button2会导致对文本的不同操作，在JavaScript函数中以id="mytextarea"访问文本字段中的文本的最佳方法是什么，而无需创建与HTML页面严重耦合的代码？
Just as an example, assume I am expecting a binary number in the text field, and button1 will convert it to an integer decimal number, but button two will convert it to a fractional decimal number. 仅作为示例，假设我期望文本字段中为二进制数，而button1会将其转换为整数十进制数，但是按钮2会将其转换为分数十进制数。 How can I handle this without tightly coupling the JavaScript code to the HTML page? 如何在不将JavaScript代码紧密耦合到HTML页面的情况下处理此问题？ Is there some way to send the data in mytextarea down to the JavaScript code, without having to use a document.getElementById('mytextarea') in the JavaScript functions themselves? 是否有某种方法可以将mytextarea中的数据发送到JavaScript代码，而不必在JavaScript函数本身中使用document.getElementById('mytextarea') ？
Perhaps I should clarify, 也许我应该澄清一下，
I am not looking for an alternative to using getElementById , I am looking for a way to write JavaScript code that can use a text-field in an HTML page without being coupled to it. 我不是在寻找使用getElementById的替代方法，而是在寻找一种编写JavaScript代码的方法，该方法可以在HTML页面中使用文本字段而无需与之耦合。 In other words, I would like to know how to write JavaScript functions and HTML pages in such a way that (1) the JavaScript functions can perform work on data in the HTML page and (2) the JavaScript function can be be moved to another HTML page and used there, without changing said function. 换句话说，我想知道如何编写JavaScript函数和HTML页面，使得（1）JavaScript函数可以对HTML页面中的数据执行工作，并且（2）JavaScript函数可以移至另一个 HTML页面并在那里使用，而无需更改所述功能。
3 个解决方案
解决方案1
1 已采纳 2012-10-26 19:26:00
I think this is what you want: 我认为这是您想要的：
First you create an object called Textarea that lets you pass a textarea element as an argument: 首先创建一个名为textarea的一个对象，可以让你传递一个textarea元素作为参数：
function Textarea(textarea) {
this.container = textarea;
this.value = textarea.value
};
Then you can add methods shared by every instance of the Textarea object : 然后，您可以添加Textarea object每个实例共享的方法：
Textarea.prototype.ChangeValue = function(){
console.log( 'Please add your ' + this.value );
};
In this way, you can pass mytextarea and modify it as you want. 这样，您可以传递mytextarea并根据需要mytextarea进行修改。 This allows to reuse properties and methods in your object in other textareas or other projects where you need it. 这允许在其他文本区域或需要的其他项目中重用对象中的属性和方法。
t = new Textarea(document.getElementById('mytextarea'));
t.ChangeValue();
Demo: http://jsfiddle.net/SQ2EC/ 演示： http ： //jsfiddle.net/SQ2EC/
解决方案2
0 2012-10-26 19:37:55
Since you need some way to inform the functions about the elements to be operated on, there are two simple options. 由于您需要某种方式来告知功能要操作的元素，因此有两个简单的选项。 You can pass a reference to an element as a parameter when calling a function, as in 您可以在调用函数时将对元素的引用作为参数传递，如
onclick="manipulate(document.getElementById('mytextarea'))"
Or you could pass just the id attribute value: 或者，您可以仅传递id属性值：
onclick="manipulate('mytextarea')"
in which case the function would need to use document.getElementById() , but on its parameter, not a wired-in string. 在这种情况下，该函数将需要使用document.getElementById() ，但要使用其参数，而不是有线字符串。
The first approach is more flexible in the sense that it lets you construct a reference in some other way too, eg document.getElementsByTagName('textarea')[0] . 第一种方法在允许您也以其他方式构造引用的意义上更为灵活，例如document.getElementsByTagName('textarea')[0] 。
You could combine the approaches, by writing the function so that it can handle both kinds of parameters. 您可以通过编写函数来组合方法，以便它可以处理两种参数。 It could eg first check whether its argument is of string type and use document.getElementById() on it if it is, otherwise expect it to be a reference to an element. 例如，它可以首先检查其参数是否为字符串类型，并在其上使用document.getElementById() ，否则可以将其作为对元素的引用。 And you should probably have some sanity checks in the function, testing that what you get or construct is really a reference to a textarea element. 而且您可能应该在函数中进行一些完整性检查，测试所获得或构造的内容是否确实是对textarea元素的引用。
解决方案3
-2 2012-10-26 19:00:46
I dint get what exactly you want to do but here you can get value of textbox on it's change event 我不知道您到底想做什么，但在这里您可以在更改事件中获取文本框的值
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.