javascript的表单事件

飞腾创客

于 2017-08-30 18:55:08 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_39716220/article/details/77720761

javascript基础专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个简单的HTML表单中各种事件的应用案例，包括失去焦点(onblur)、获取焦点(onfocus)、内容改变(onchange)及实时输入(oninput)事件。通过这些事件可以实现对输入框样式的动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>表单事件</title>
<style type="text/css">
input{
/*去掉输入框默认蓝色边框*/
outline: none;
/*border-color: transparent;*/
}
</style>
</head>
<body>
<div>
<input type="text" name="">
</div>
</body>
<script type="text/javascript">
var inp=document.getElementsByTagName('input')[0];
//表单事件
//表单元素失去焦点是触发
inp.onblur=function(){
//alert('失去焦点');
}
//表单获取焦点时
inp.onfocus=function(){
// alert('获取焦点');
inp.style.borderColor="red";
inp.style.borderColor="yellow";
}
//表单内容发生改变并失去焦点时触发
inp.onchange=function(){
//表单里面
inp.style.backgroundColor='pink';
}
//表单内容改变时实时触发
inp.oninput=function(){
inp.style.backgroundColor='yellow';
console.log('表单内容已改变');
}

</script>
</html>