`

js学习之Event对象和Form对象以及Input对象

JavaScript 
阅读更多
Event对象


光标的位置代码来自w3school 


<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>

<body onmousedown="show_coords(event)">

<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标</p>
</body>
</html>



哪个鼠标按钮被点击代码来自w3school 


<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
  {
  alert("您点击了鼠标右键！")
  }
else if(btnNum==0)
  {
  alert("您点击了鼠标左键！")
  }
else if(btnNum==1)
  {
  alert("您点击了鼠标中键！");
  }
else
  {
  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
  }
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键</p>
</body>
</html>



按键的unicode代码来自w3school 

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>

<body onkeyup="whichButton(event)">
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>

</html>


相对于屏幕的x和y坐标代码来自w3school 


<html>
<head>

<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body onmousedown="coordinates(event)">

<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>

</body>
</html>


shift键是否按了代码来自w3school 

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
  if (event.shiftKey==1)
    {
    alert("The shift key was pressed!")
    }
  else
    {
    alert("The shift key was NOT pressed!")
    }
  }
</script>
</head>

<body onmousedown="isKeyPressed(event)">

<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>

</body>
</html>


哪个元素被点击了[b][color=orange]代码来自w3school 
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) {
    var e = window.event
    alert("e:"+e)
}
if (e.target) {
    targ = e.target
    alert("target:"+targ)
}else if (e.srcElement) {
  targ = e.srcElement
  alert("targ:"+targ)
}
if (targ.nodeType == 3) {
   // defeat Safari bug
   targ = targ.parentNode
   alert("targeD"+targ)
}
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>

<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>

</html>

ps:target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

哪类时间被触发了代码来自w3school 

<html>
<head>
<script type="text/javascript">
function getEventType(event)
  { 
  alert(event.type);
  }
</script>
</head>

<body onmousedown="getEventType(event)">

<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>

</body>
</html>


ps:因为一直是点击 所以一直显示mousedown事件

Form和Input对象


更改form的action地址代码来自w3school 

<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>

<form id="myForm" action="/i/eg_smile.gif">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()"
value="改变 action 属性并提交表单" />
</form>

</body>
</html>


返回向服务器发送数据的方法代码来自w3school 

<html>
<head>
<script type="text/javascript">
function showMethod()
  {
  var x=document.getElementById("myForm")
  alert(x.method)
  }
</script>
</head>
<body>

<form id="myForm" method="post">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="showMethod()" value="显示 method" />
</form>

</body>
</html>


显示按钮的id和类型以及按钮的禁用代码来自w3school 

<html>
<head>
<script type="text/javascript">
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id
txt=txt + ", type: " + document.getElementById("myButton").type
alert(txt)
document.getElementById("myButton").disabled=true
}
</script>
</head>

<body>
<form>
<button id="myButton" onClick="alertId()">请点击我！</button>
</form>
</body>

</html>



选定以及取消选中checkbox代码来自w3school 

<html>
<head>
<script type="text/javascript">
function check()
{
document.getElementById("myCheck").checked=true
}

function uncheck()
{
document.getElementById("myCheck").checked=false
}
</script>
</head>

<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="选定复选框" />
<input type="button" onclick="uncheck()" value="取消选定复选框" />
</form>
</body>

</html>



一个表单中的若干个checkbox代码来自w3school 

<html>
<head>
<script type="text/javascript">
function createOrder()
{
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="您订购的咖啡带有： " + txt
}
</script>
</head>

<body>
<p>你喜欢怎么喝咖啡？</p>
<form>
<input type="checkbox" name="coffee" value="奶油">加奶油<br />
<input type="checkbox" name="coffee" value="糖块">加糖块<br />
<br />
<input type="button" onclick="createOrder()" value="发送订单">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>

</html>




checkbox把文本转换成大写代码来自w3school 

<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
</script>
</head>

<body>
<form name="form1">
名：<input type="text" id="fname" size="20" />
<br /><br />
姓：<input type="text" id="lname" size="20" />
<br /><br />
转换为大写
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
</body>

</html>



单选按钮的value属性代码来自w3school 

<html>
<head>
<script type="text/javascript">
function check(browser)
  {
  document.getElementById("answer").value=browser
  }
</script>
</head>
<body>

<p>您喜欢哪款浏览器？</p>

<form>
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br />
<br />
您喜欢的浏览器是：<input type="text" id="answer" size="20">
</form>

</body>
</html>


重置表单代码来自w3school 
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>

<body>
<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>

<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form>
</body>

</html>


提交表单代码来自w3school 

<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>

<body>
<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>

<form id="myForm" action="/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="提交">
</form>
</body>

</html>


验证表单代码来自w3school 

<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"

if (fname.length>10)
 {
 alert("名字必须小于 10 个字符。")
 submitOK="false"
 }
if (isNaN(age)||age<1||age>100)
 {
 alert("年龄必须是 1 与 100 之间的数字。")
 submitOK="false"
 }
if (at==-1) 
 {
 alert("不是有效的电子邮件地址。")
 submitOK="false"
 }
if (submitOK=="false")
 {
 return false
 }
}
</script>
</head>

<body>
<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交"> 
</form>
</body>

</html>


验证表单代码来自w3school 
<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"

if (fname.length>10)
 {
 alert("名字必须小于 10 个字符。")
 submitOK="false"
 }
if (isNaN(age)||age<1||age>100)
 {
 alert("年龄必须是 1 与 100 之间的数字。")
 submitOK="false"
 }
if (at==-1) 
 {
 alert("不是有效的电子邮件地址。")
 submitOK="false"
 }
if (submitOK=="false")
 {
 return false
 }
}
</script>
</head>

<body>
<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交"> 
</form>
</body>
</html>


设置和移开文本域上的焦点代码来自w3school 

<html>
<head>
<script type="text/javascript">
function setFocus()
  {
  document.getElementById('text1').focus()
  }
function loseFocus()
  {
  document.getElementById('text1').blur()
  }
</script>
</head>
<body>

<form>
<input type="text" id="text1" />
<br />
<input type="button" onclick="setFocus()" value="设置焦点" />
<input type="button" onclick="loseFocus()" value="失去焦点" />
</form>

</body>
</html>


选取文本域的内容代码来自w3school 
<html>
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>

<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧！">
<input type="button" value="选择文本" onclick="selText()"> 
</form>
</body>
</html>


表单中的下拉列表代码来自w3school 
<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onchange="favBrowser()">
  <option>Internet Explorer</option>
  <option>Netscape</option>
  <option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>


另一个下拉列表代码来自w3school 
<html>
<head>
<script type="text/javascript">
function moveNumbers()
{
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=option
document.getElementById("result").value=txt
}
</script>
</head>

<body>
<form>
请选择数字：<br />
<select id="no">
	<option>0</option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
</select>
<input type="button" onclick="moveNumbers()" value="-->"> 
<input type="text" id="result" size="20">
</form>
</body>
</html>


当达到文本域的最大值的时候跳到另一个域代码来自w3school 

<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
	{
	var next=x.tabIndex
	if (next<document.getElementById("myForm").length)
		{
		document.getElementById("myForm").elements[next].focus()
		}
	}
}
</script>
</head>

<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>

<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>


若干表单域添加快捷键代码来自w3school 
<html>
<head>
<script type="text/javascript">
function access()
{
document.getElementById('myName').accessKey="n"
document.getElementById('myPwd').accessKey="p"
document.getElementById('ie').accessKey="i"
document.getElementById('fx').accessKey="f"
document.getElementById('myButton').accessKey="b"
}
</script>
</head>

<body onload="access()">
<form>
姓名：<input id="myName" type="text" />
<br />
密码：<input id="myPwd" type="password" />
<br /><br />
选择您喜欢的浏览器：
<br />
<input type="radio" name="browser" id="ie" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" id="fx" value="Firefox">Firefox
<br /><br />
<input type="button" value="点击我！" id="myButton" />
</form>

<p>（请使用 Alt + <i>accesskey</i> 为不同的表单字段赋予焦点。）
</p>
</body>
</html>


ps:这个快捷键最容易与浏览器的快捷键重复而导致失效,至少我在Firefox上没效果

今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了
分享到：
| js学习之Anchor对象和Document对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js对象关系图 方便dom操作

    js对象关系图 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法，并提供实例。 Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法，并...

    Javascript中最常用的55个经典技巧

    &lt;script type="text/javascript"&gt; function handleEnter (field, event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { var i; ...

    前端小工具 - js模拟键盘、鼠标事件给element form批量赋值

    js 通过 MouseEvent InputEvent KeyboardEvent等webapi的方式，模拟实现 element form 的批量赋值

    解决layui中的form表单与button的点击事件冲突问题

    layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图： 蓝色底为form的位置，“重新搜索”为&lt;button&gt;标签的位置，此时，button标签的click事件无法响应。 必须将form的宽度...

    js验证表单 js验证表单

    2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入...

    客户端统一验证JavaScript函数库及示例源码

    由于面向对象的本质，JavaScript允许对象、对象的属性以及其事件都通过脚本来控制。也因为大部分网页浏览器都支持JavaScript，所以它是网页设计时最适合的客户端语言。ChkInputs.js就是通过JavaScript并结合DOM对象...

    大名鼎鼎SWFUpload- Flash+JS 上传

    它结合了FLASH和JavaScript的功能，以提供一种超越了传统的浏览器中&lt;input type="file" /&gt;标签提供的文件上传功能。 SWFUpload提供的主要功能: 在文件选择对话框中能够进行文件多选 页面无刷新的上传 提供...

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    javascript数组和字典以及for循环 javascript条件语句 javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 ...

    python入门到高级全栈工程师培训 第3期 附课件代码

    06 form表单之input标签 07 通过form向server端发送数据 08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css...

    react-file-input:React的组件

    React文件输入设置本机HTML文件输入的样式可能会非常麻烦，更糟糕的是，浏览器的默认外观可能与您应用的设计不符。...var Form = React . createClass ( { handleChange : function ( event ) { console .

    【JavaScript源代码】vue form表单post请求结合Servlet实现文件上传功能.docx

    　&lt;template&gt;　&lt;div&gt;　&lt;input type="file" name="file" @change="change($event)"&gt;　&lt;/div&gt;　&lt;/template&gt;　&lt;script&gt;　export default {　created(){　this.path = this.$route.query;　for (let i in this.path) {　...

    vue.js学习相关文件-测试代码

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。 &lt;!-- 阻止单击事件冒泡 --&gt; ...

    微信小程序提交form操作示例

    其中的name，和一般的网页一样，将需要上传的input等表单组件设置name属性，在这里，form传递的参数，使用name作为一个key 提交动作是由&lt;form/&gt; 表单中 formType 为 submit 的 &lt;button/&gt; 组件来控制的，...

    javascript setTimeout()传递函数参数(包括传递对象参数)

    于是，上网查找了一下，用了另一种写法setTimeout（”fun(“+参数+”)”, 1000）,还是不行，但是以上写法在传递form表单的textarea是可以的，比如hml是这样： 代码如下: &lt;body&gt; ”main”&gt; ”showpane” class=...

    js使用小技巧

    &lt;input type=text onkeypress="return event.keyCode&gt;=48&&event.keyCode||(this.value.indexOf(".")&lt;0?event.keyCode==46:false)" onpaste="return !clipboardData.getData("text").match(/D/)" ondragenter=...

    jsp表单验证汇总

    两次输入密码是否相同&lt;FORM METHOD=POST ACTION=""&gt;&lt;input type="password" id="input1"&gt;&lt;input type="password" id="input2"&gt;&lt;input type="button" value="test" onclick="check()"&gt;&lt;/FORM&gt;&lt;script&gt;function check...

    表单验证大全

    if ((contain(document.form.NAME.value, "%\(\)&gt;)) || (contain(document.form.MESSAGE.value, "%\(\)&gt;))) { alert&#40;"输入了非法字符"&#41;; document.form.NAME.focus(); return false; } return true; } //--...

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    46种常见的浏览器兼容性问题大汇总

    11. input.type属性问题 3 12. event.srcElement问题 3 13. body载入问题 3 14. 事件委托方法 3 15. Table操作问题 3 16. 对象宽高赋值问题 3 Ø CSS 3 1. cursor:hand VS cursor:pointer 3 2. innerText在...

Magicbox
Global site tag (gtag.js) - Google Analytics