首页 > 代码库 > 新的事件
新的事件
getElementsByClassName(名字)【不兼容IE9及以上】
getElementsByName(名字)【不兼容IE9及以上】
通过名字来获取元素 ,支持高级浏览器
onsubmit表单验证:当表单提交的时候,会触发的事件
<body> <form action="1.php"> 用户名: <input type="text" name="userName" /><br> <input type="submit" /> </form> </body> <script> window.onload =function () { var oForm = document.getElementsByTagName(‘form‘)[0]; var oInput = document.getElementsByName(‘userName‘)[0]; oForm.onsubmit = function () { if (oInput.value == ‘‘) { alert(‘请输入用户名‘); return false; } }; }; </script>
onchange: 一般用于select标签(选中一个列表项,则触发此事件)
<body> <select id="sel"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> </select> </body> <script> window.onload = function (){ var oSel = document.getElementById(‘sel‘); oSel.onchange = function () { alert(this.value); } } </script>
oninput:
当输入框值改变的时候会触发的事件,实时监听到输入框的改变,
无论用什么方式赋值,都可以监听到值得改变 (IE9以上)
onpropertychange:
当输入框值改变的时候会触发的事件 (会执行几次)(IE9以下)
<script> window.onload = function () { var oInput = document.getElementsByTagName(‘input‘)[0]; // oInput.oninput = function () { // alert(this.value); // } oInput.onpropertychange = oInput.oninput = function () { alert(this.value); } } </script>
onfocus: 获取焦点
onblur: 失去焦点
placeholder:属于H5的新属性,低版本的浏览器是不兼容,只能放置文字
<style> #box { position: relative; } input { width: 300px; height: 40px; outline: none; padding-left: 3px; } #box span { position: absolute; color: #ccc; left: 8px; top: 12px; } </style> <body> <div id="box"> <input type="text" /> <!-- 就是提示文字 --> <!-- 给span添加背景图片就够了 --> <span>这是提示文字</span> </div> </body> <script> window.onload = function () { var oInput = document.getElementsByTagName(‘input‘)[0]; var oSpan = document.getElementsByTagName(‘span‘)[0];
oInput.oninput = oInput.onpropertychange = function () { oSpan.style.display = ‘none‘; } } //点击文字获取焦点 oSpan.onclick = function () { //获取焦点 oInput.focus(); } //获取 oInput.onfocus = function () { oSpan.style.display = ‘none‘; } //失去 oInput.onblur = function () { if (this.value == ‘‘) { oSpan.style.display = ‘block‘; } } } </script>
新的事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。