html如何实现输入框自动赋值？

html-css015

html如何实现输入框自动赋值？,第1张

1、新建并保存一个html文档，进入html代码编辑页面。

2、写一个input文本输入框，并定义ID，然后写一个按钮，并定义ID。

3、要做的效果就是点击按钮为输入框赋值，然后把输入框和按钮的css样式写好，不写样式也可以。

4、引入jquery文件，路径要正确，写jquery代码，打开浏览器测试一下，点击按钮之后，输入框内就会自动输入赋值的内容。

以点击按钮，改变按钮元素的内容为案例，点击的时候 ”按钮“ 变为 ”hello“

1、通过js获取元素，例如，获取元素btn按钮

2、通过js，当点击按钮的时候，改变原来的值为“hello”

3、运行效果如下：

4、点击按钮之后的效果：

完整的html代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

.wrap{

width:400px

height:300px

background:#000

position:relative

}

a.btn1{

display:block

width:140px

height:40px

line-height:40px

text-align:center

background:#ff0099

color:#fff

position:absolute

left:100px

top:100px

}

  </style>

 </head>

 <body>

  

<div class="wrap">

<a href="javascript:" class="btn1" id="btn">按钮</a>

</div>

<script type="text/javascript">

var oBtn= document.getElementById("btn")

oBtn.onclick=function(){

oBtn.innerHTML="hello"

}

</script>

 </body>

</html>