- 浏览: 96133 次
- 性别:
文章分类
- 全部博客 (151)
- Spring-MVC学习 (5)
- 偶然间发现 (2)
- easyUi学习 (7)
- web项目相关技术 (4)
- java学习 (26)
- webService (4)
- 一些工具的安装使用 (7)
- js学习 (20)
- Sping学习 (7)
- mybatis学习 (5)
- 定时器 (4)
- oracle (2)
- JSP学习 (6)
- HTML一些标签 (1)
- web服务 (2)
- 偶尔得到的地址 (2)
- 常用的代码记录 (2)
- 设计模式 (1)
- java常使用的开源API (1)
- maven (1)
- Socket (1)
- nginx (2)
- jquery (3)
- poi (2)
- 写过的工具类 (19)
- 微信开发 (2)
- mysql (1)
- freemarker (2)
- ftp (1)
- 用过的软件 (1)
- jconsole (1)
- log4j (1)
- redis的简单入门使用 java调用redis (0)
- redis的使用 (2)
- 生活相关的 (1)
最新评论
-
chokee:
...
easyUi学习之开启行编辑模式增删改操作 -
lijie_insist:
就是有的界面需要显示天气啊!所以你要调用天气的接口啊 因为很多 ...
免费的天气接口的一个demo -
zhglance:
请问这是干什么用的呢?
免费的天气接口的一个demo
Event对象
光标的位置代码来自w3school
哪个鼠标按钮被点击代码来自w3school
按键的unicode代码来自w3school
相对于屏幕的x和y坐标代码来自w3school
shift键是否按了代码来自w3school
哪个元素被点击了[b][color=orange]代码来自w3school
ps:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
哪类时间被触发了代码来自w3school
ps:因为一直是点击 所以一直显示mousedown事件
Form和Input对象
更改form的action地址代码来自w3school
返回向服务器发送数据的方法代码来自w3school
显示按钮的id和类型以及按钮的禁用代码来自w3school
选定以及取消选中checkbox代码来自w3school
一个表单中的若干个checkbox代码来自w3school
checkbox把文本转换成大写代码来自w3school
单选按钮的value属性代码来自w3school
重置表单代码来自w3school
提交表单代码来自w3school
验证表单代码来自w3school
验证表单代码来自w3school
设置和移开文本域上的焦点代码来自w3school
选取文本域的内容代码来自w3school
表单中的下拉列表代码来自w3school
另一个下拉列表代码来自w3school
当达到文本域的最大值的时候跳到另一个域代码来自w3school
若干表单域添加快捷键代码来自w3school
ps:这个快捷键最容易与浏览器的快捷键重复而导致失效,至少我在Firefox上没效果
今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了
光标的位置代码来自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上没效果
今天就学这么多,明天如果没啥事,在看下后面的对象!要做事了!分配新任务了
发表评论
-
*.location.href的使用
2015-12-01 11:49 420*.location.href 用法: t ... -
js前端传递时间段来倒计时
2015-11-20 12:14 646上班整合了下这个 需要 ... -
js倒计时
2015-11-03 08:29 290<html xmlns="http://www ... -
纯js发送ajax请求
2015-08-18 19:14 710每次都用jquery,这次要微信开发,用纯js的可能少加载点东 ... -
获取验证码
2015-08-14 17:57 0<!DOCTYPE html PUBLIC " ... -
jquery图片展示代码
2015-03-03 08:55 111一个图片展示的代码 -
js学习之java script使用
2015-03-12 14:21 432总算看完了HTML DOM相关的基础知识了,下面开始整理jav ... -
js学习之HTML DOM事件和导航
2014-12-15 15:45 503这两个内容差不多是w3school对HTML DOM的最后的介 ... -
js学习之HTML DOM的访问和修改
2014-12-15 15:22 459HTML DOM访问 坚持接着把w3chool上的实例学完,最 ... -
js学习之字符串中英文判断
2014-12-12 17:45 721之前写js时候要判断中英文,网上找了下,引用这位博友的第三种方 ... -
js学习之HTML DOM的一些基础概念
2014-12-10 10:57 407经过近一个星期,总算把 ... -
js学习之Window对象
2014-12-09 17:50 409Window对象 显示对话框代码来自w3school ... -
js学习之Table,TableHeader,TableRow,TableData对象
2014-12-08 09:49 522Table,TableHeader,TableRow,Tabl ... -
js学习之Option和Select对象以及screen对象
2014-12-08 09:06 415Option和Select对象 禁止并启用下拉框代码来自w ... -
js学习之Location 对象以及 Navigator对象
2014-12-08 08:44 546这两天一直看online小说,感觉太颓废了!作为一个毕业才一年 ... -
js学习之Frame、Frameset 以及 IFrame 对象和image对象
2014-12-05 09:45 512今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习 ... -
js学习之Anchor对象和Document对象
2014-12-03 09:37 451Anchor对象 失去焦点和获取焦点有时候自己总喜欢忘记,而 ... -
javascript/jquery判断是否为undefined或是null
2014-12-03 09:05 484转自:http://blog.csdn.net/dxnn520 ... -
页面一些树的加载库
2014-12-02 15:28 411(dhtmlxTree的demo) http://dhtmlx ... -
js一些有用的demo和网站
2014-12-02 10:06 421http://www.fullavatareditor.com ...
相关推荐
本主题将深入探讨如何使用原生JavaScript对form表单进行美化,并对input输入框和select下拉框进行优化。 一、表单基础 1. 表单元素:HTML中的<form>标签定义了一个表单,其中可以包含各种表单控件,如<input>...
`Window`对象是浏览器窗口的顶级对象,它是所有JavaScript全局对象、函数以及变量的容器。例如: - `alert`, `confirm`, `prompt`:分别用于弹出警告框、确认对话框以及输入对话框。 - `window.open`和`window....
兼容IE和Firefox获得keyBoardEvent对象 在 JavaScript 编程中,获得keyBoardEvent对象是非常重要的,但是不同的浏览器对其支持不同。IE和Firefox是两种最常用的浏览器,它们对keyBoardEvent对象的支持存在一定的...
以上内容仅是JavaScript对象属性的一个概述,实际的JavaScript对象和属性体系更为庞大和复杂,包括了更多如`form`、`window`、`event`、`math`等对象,以及更多的方法和属性,用于实现丰富的交互和功能。理解并熟练...
JavaScript中的浏览器对象是Web开发中不可或缺的部分,它们提供了与用户交互和访问浏览器特定功能的能力。在JavaScript中,浏览器对象模型(Browser Object Model, BOM)允许开发者操控浏览器的各种特性,如窗口、...
"jqueryform.js"是一个非常实用的jQuery插件,它简化了这一过程,提供了对表单的AJAX化支持,包括文件上传和进度显示功能。本文将深入探讨jQuery Form插件的原理、使用方法以及实际应用。 首先,jQuery Form插件的...
例如,将`document.forms("formName")`改为`document.forms["formName"]`,以及将`document.getElementsByName("inputName")(1)`改为`document.getElementsByName("inputName")[1]`。 #### 3. `event`问题 - **IE*...
在使用jQuery FormValidation之前,首先需要在项目中引入jQuery库和FormValidation的JS及CSS文件。例如,你可以通过CDN或下载压缩包(如`formValidator3.1`)来获取这些资源。在HTML文件中,将它们链接到页面头部: ...
在本主题中,我们将深入探讨JavaScript中的事件、字符串长度控制以及如何对Form表单进行提交控制。 首先,我们来讨论JavaScript事件。事件是用户与网页进行交互时产生的动作,比如点击按钮、滚动页面或填写表单。...
此外,还包括事件处理(Event)、表单(Form)及输入元素(Input)、图像(Image)、框架(Frame和IFrame)、链接(Link)、Meta、Object、Option、Select、Style、Table、TableCell、TableRow、Textarea等,这些都...
- IE的事件对象`event`有`x`和`y`属性,表示鼠标位置,而Firefox使用`event.pageX`和`event.pageY`。为了兼容,可以使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用。如果需要精确的坐标,...
根据提供的文件信息,我们可以从标题、描述以及部分内容中提取出关于JavaScript对象与数组的重要知识点。 ### JavaScript对象与数组参考大全 #### 一、JavaScript对象详解 **1. Anchor对象** - **简介**: `...
但是缺点也很明显,就是在form表单里会增加一个input节点。对于希望保持HTML代码简洁的开发者来说,这种方法可能会让人感到不舒服。 2. 在提交前使用JavaScript动态添加input元素 如果开发者需要在不修改HTML结构的...
通过`<form>`标签定义表单,通常包含多个子对象如`input`、`textarea`等。 - **Frame**: 框架对象,用于在一个页面中显示多个文档。`<frame>`标签定义了单个框架。 - **Input**: 输入对象,用于获取用户的输入。常见...
在JavaScript(JS)中,实现一个输入元素`<input type="file">`的多文件上传功能是一项常见的需求,尤其在Web开发中。这个"js input file多个文件上传功能.zip"包含了一个实现这一功能的代码示例,适用于图片和其他...
在前端开发中,有时我们需要对页面上的表单(form)元素进行批量赋值,这通常涉及到JavaScript(js)的事件处理和DOM操作。本话题主要探讨如何利用JavaScript的Web API,如MouseEvent、InputEvent和KeyboardEvent,...
除此之外,JavaScript还包含许多其他重要对象,如`form`对象用于处理表单数据,`event`对象用于处理用户交互事件,`window`对象代表浏览器窗口,以及`navigator`对象提供关于用户浏览器的信息。每个对象都有其独特的...
- IE的`event`对象包含`x`和`y`属性,而火狐使用`pageX`和`pageY`。 - 为了兼容性,可以使用`event.clientX`和`event.clientY`,它们在两个浏览器中都可用。如果需要与`event.x`和`event.y`完全一致,可以定义一个...
在前端开发中,由于各种浏览器对JavaScript的支持程度和实现细节各不相同,常常会导致一些兼容性问题。这些问题如果不妥善处理,可能会影响到页面的正常显示和功能的正常使用。本文将围绕JavaScript中的多浏览器兼容...
本文重点介绍了Vue.js框架下,如何设计和实现Form表单及其各个组件,包括Form、FormItem和Input组件,以及表单验证的实现。 ### ElementUI表单基本用法 首先,我们来看看ElementUI中Form表单的基本用法。ElementUI...