html+JS 输入文本框，获取文本框内容且输出

获取文本框中的内容有以下两种方法：

假设为如下文本框：

<input type="text" value="" id="text">

1、原生JS获取文本框的值：

documentgetElementById("text")value  //text为文本框的id

2、jquery获取文本框的值：

$("#text")val()

1、如图所示，右键单击项目，选择添加新项，先添加一个页面。

2、然后在d出来的窗体，选择Web窗体，点击添加进入下一步。

3、接着输入图中的代码到head和body里面。下面的代码可直接复制

head里面的js代码：

<script type="text/javascript">

function load() {

var input = documentgetElementById("txbInfo")value;   //获取用户在Info上输入的值

windowalert ("您输入的是："+ input);

}

</script>

body里面的控件代码：

<form id="form1" runat ="server">

<input type ="text" id="txbInfo" name="txbInfo"  style="width:80px;" />

<input type ="button" id="btnGet" name="btnGet" value="获取" style="width:50px;" onclick="load()" />

</form>

4、写好代码后，点击图中类似播放键的按钮运行调试。测试一下，所写的代码是否可行。

5、如图所示， 运行后的页面，只有一个输入框，和一个获取的按钮，因为只写了这两个控件，所以界面很简单。

6、接着，在输入框上，输入一个信息。例如，输入“我想点餐吃鸡腿”。输入完毕后，点击获取，看看效果。

7、如图所示， d出来了的信息是“您输入的是：我想点餐吃鸡腿”。获取了刚才输入的值，证明这个代码获取input输入的信息是可行的。

1、在jQuery里面，获取id的值，或者其他任意属性的值，可以用attr();

<div class="row">

<p>既然是知道有多个input，可以明确指定id ，在function里面分别对不同的id进行 *** 作就行了，而不是需要去判断id是什么，如果需要针对属性值判断，那么就不要用id，干脆加属性吗，属性可以任意命名</p>

<label for=""> 1 :</label>

<input type="text"

name="test"

id=“input_1” />

<label for=""> 2 :</label>

<input type="text"

name="test"

id=“input_2” />

<label for=""> 3 :</label>

<input type="text"

name="test"

id=“input_3” />

<button type="button"

class="btn btn-default"

id="btn_2">测试</button>

</div>

//为按钮设置事件

$("#btn_2")click(function () {

//把所有name=test的input都取到，遍历得到id继续进行判断或其他 *** 作都可以

//alert(huiyi);

$("input[name='test']")each(function () {

var id = $(this)attr('id');

alert(id);

if (id == '') {

//

}

});

});

运行效果

<input name="fx" type="checkbox" value=""/>复选框1<br />

<input name="fx" type="checkbox" value=""/>复选框2<br />

<input name="fx" type="checkbox" value=""/>复选框3<br />

<button id="btn">确定按钮</button>

<script>

var msg="";

var fxs=documentgetElementsByName("fx");

for(var i=0;i<fxslength;i++){

fxs[i]onclick=function(){

msg=prompt("请任意输入一些字符");

}

}

documentgetElementById("btn")onclick=function(){

alert("你刚才输入的内容是"+msg);

}

</script>

以上就是关于html+JS 输入文本框，获取文本框内容且输出全部的内容，包括:html+JS 输入文本框，获取文本框内容且输出、js怎么获取input的输入的值、如何获取html里面<input>的id的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！