在javascript中使用来自html框的输入

Question

目前，我正在努力学习js。 此刻，我可以制作一些简单的功能脚本。 但每当我想要用户输入时，我仍然需要一个提示，这可能会变得很烦人。 因此，我想使用HTML框进行用户输入。

我把这个框放在HTML中，如下所示：

<FORM>
    <INPUT type="button" value="Fill Me In" name="box1">
</FORM>

但是如何在javascript中调用输入呢？

提前致谢。

Answer 1

有多种方法可以获取输入文本框值：

方法1：

document.getElementById('textbox_id').value to get the value of desired box

Eg. document.getElementById("searchTxt").value;

*注意：方法2,3,4和6返回一个名为NodeList的元素集合，因此使用[whole_number]来获得所需的出现，第一个元素使用[0]，第二个元素使用1，依此类推...... *

方法2：

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live Nodelist

Eg. document.getElementsByClassName("searchField")[0].value;
if this is the first textbox in your page.

方法3：

使用document.getElementsByTagName（'tag_name'）[whole_number] .value，它还返回一个实时节点列表

Eg. document.getElementsByTagName("input")[0].value; ,
if this is the first textbox in your page.

方法4：

document.getElementsByName（ '姓名'）[whole_number]。价值

Eg. document.getElementsByName("searchTxt")[0].value; 
if this is the first textbox with name 'searchtext' in your page.

方法5：

使用强大的document.querySelector（'selector'）。value，它使用CSS选择器来选择元素

Eg. document.querySelector('#searchTxt').value; selected by id
document.querySelector('.searchField').value; selected by class
document.querySelector('input').value; selected by tagname
 document.querySelector('[name="searchTxt"]').value; selected by name

方法6：

document.querySelectorAll（'selector'）[whole_number] .value，它也使用CSS选择器来选择元素，但它将所有带有该选择器的元素作为静态节点列表返回。

Eg. document.querySelectorAll('#searchTxt')[0].value; selected by id 
document.querySelectorAll('.searchField')[0].value; selected by class 
document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

Answer 2

你可以这样做：

<FORM>
    <INPUT type="button" value="Fill Me In" name="box1" id="txt">
</FORM>

Javascript：

var txtval=document.getElementById("txt").value;

要么 ：

你可以创建自定义对话框并使用javascript或jquery显示它（最佳选项）

有关对话框的更多信息，请参阅此链

Answer 3

您可以使用window.openDialog打开一个窗口作为对话框：

var retValues = { box1: null };
var win = openDialog("your_form.html", "dlg", "modal", retVals);
alert(retValues.box1);

然后你的对话框：

<FORM onsubmit="window.arguments[1].box1 = document.getElementById('txt').value; close();">
    <INPUT type="button" value="Fill Me In" name="box1" id="txt">
</FORM>