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

JavaScript026

html+JS 输入文本框，获取文本框内容且输出,第1张

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

假设为如下文本框：

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

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

document.getElementById("text").value  //text为文本框的id

2、jquery获取文本框的值：

$("#text").val()

可以通过js获取表单input 的值，给值做判断，是否为空，html中form表单的制onsubmit属性。

html中插入<form>如下：

<form action="" method="post"  name="form" onsubmit="return check()">

js代码判断如下：：

function check(){

var name = document.getElementById("name")

if(name == ""){

    alert("姓名不能为空！")

    return false

}

}

1、新建一个html文件，命名为test.html。

2、在test.html文件中，使用input标签创建一个文本输入框，代码如下。

3、在test.html文件中，使用readonly="readonly"设置input文本框只读，不可更改。

4、在test.html文件中，创建一个button按钮，用于点击按钮时，实现改变文本框的只读属性。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行gb函数。

6、在js标签中，创建一个gb函数，在函数内，通过文本框id获得对象，设置readOnly属性为false,即关闭input文本框的只读属性。