form表单事件

<body>

<input type="text">

<input type="search" class="search">

<script>

    // 获得焦点 onfocus

document.querySelector("input").

onfocus = function(){

this.value = "长青吴彦祖";

};

// 失去焦点 onblur

document.querySelector("input").onblur = function(){

this.value = "wwww";

}

  // 输入oninput

document.querySelector("input").oninput = function(){

console.log(this.value);

// 这个和百度搜索差不多

}

// 改变 onchange

document.querySelector("input").onchange = function(){

console.log(this.value);

// 这个是利用敲回车(就是脱离焦点)之后才出现

}

  // 文本被选择上 onselect

document.querySelector("input").onselect = function(){

alert("不允许剪切文本");

}

    // onsearch 搜索

document.querySelector(".search").onsearch = function(){

console.log(this.value);

// 这个后面会出现"x"   删除之前所打出的文字

}

</script>

时间: 2024-11-08 03:14:20

form表单事件的相关文章

JS 禁用回车、后退事件、form 表单不可编辑

一: 事件: 初始化函数中: //禁用回车 后退事件 document.onkeydown = function () { if (window.event && (window.event.keyCode == 13 || window.event.keyCode== 8)) { window.event.returnValue = false; } } 二:form 表单不可编辑: $('#myFormId').find('input,textarea,select').attr('r

不使用ASP.NET服务器端控件(包括form表单不加runat=&quot;server&quot;)来触发.cs里的事件(方法),(适用于有代码洁癖者)。

很多时候,我们使用服务器端控件写出的代码,会给我们生成一些很多我们看不懂的代码(初学者),但是有时候我们并不需要这些代码(业务需求不同),对于生成的一些代码感到多余.所以我就开始想,有没有一种可能:不使用服务器端控件(包括form表单不加runat="server"属性)来触发后台写的某一个方法或事件(ASP.NET的事件实际上是使用事件机制来驱动的).经过测试是可以的. 原理:使用反射驱动方法. 步骤:    1.手写一个提交表单的js函数(可以使用asp.net的__dopostB

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

通过button将form表单的数据提交到action层

form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: 1 <form id="handleform"> 2 <!-- 根据学生id修改学生信息 --

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

微信小程序组件解读和分析:九、form表单

form表单组件说明: 表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. form表单组件用法: 重置:<butt

按Enter键后Form表单自动提交的问题

怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然出现这种情况,脑海中第一反应是,keydown事件是不是出问题了,然后找啊找啊找啊,然后没有然后. 在把input元素上的所有事件移除掉后,我自信的按了一下enter键.艾玛,又刷新了.心里那个苦哎. 二.列出所有可能 一阵捣鼓之后,脑海中列出了所有按下enter键后的改变,url改变,多了一个问号

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

简约的form表单校验插件

前言 网上有好多form表单校验插件,包括jquery的表单检验插件,这些中好多插件功能很齐全强大,提示方式很酷,很美观好看.本想拿来用,但是发现几个问题: 1.使用不方便.校验规则繁多,调用校验函数难记忆. 2.提示方式固定.一般插件给出固定的几种提示方式,但是实际中,不同系统都有自己的页面风格样式,有自己的提示方式,插件自带的一般用不上. 因此,我最终没有采用这些插件,以免用后出现难以修改或实现的情况. 如果一种校验插件能避免以上两个问题最好了,方便使用,提示方式自定义 ,所以自己做了一个简