怎么获取输入框内的数据

2025-10-19 20:40:01

1、打开html编辑器,点击菜单栏上的【File】,点击New,再点击【HTML Page】来新建个HTML页面,如下图所示。

怎么获取输入框内的数据

2、保存好新建的html页面,然后在body区域里添加要获取的输入框,把前期准备好,如下图所示。

怎么获取输入框内的数据

3、在body区域里添加一个输入框来用于输入数据,在添加个提交按钮,来获取输入框里的数据,如下图所示。

输入框:<input type="text" id="jingyan" style="width:120px;" />

  <br/>

  <input type="button" value="提交" />

怎么获取输入框内的数据

4、在head区域里添加实现获取输入框数据的代码,然后在提交按钮那里做js的点击事件,如下图所示。

<script>

function getData(){

var content = document.getElementById("jingyan");

alert("获取到输入框里的数据为;"+content.value);

}

</script>

怎么获取输入框内的数据

5、代码写好保存后,在浏览器里打开,此时就可以看到一个输入框,如下图所示。

怎么获取输入框内的数据

6、在输入框里输入数据,然后点击提交按钮,此时就会弹出个对话框,告诉我们获取到的输入框数据了,如下图所示。

怎么获取输入框内的数据

1、方法二其实也很简单,我们只要修改下方法一的部分代码就可以了。

方法二是利用jquery来获取的,用起来更方便。

先在head区域添加上jquery。

<script type="text/javascript" src="jquery.min.js"></script>

  <script>

function getData(){

var content = $("#jingyan").val();

alert("获取到输入框里的数据为:"+content);

}

  </script>

怎么获取输入框内的数据

2、保存好后,在浏览器上运行,在输入框里输入数据,点击提交按钮后,同样可以获取到输入框里的数据,如下图所示。

怎么获取输入框内的数据

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢