芙蓉区乡建设局网站,最容易做的网站类型,建设网站坂田,wordpress 电子书目录
一、input: 当表单元素的值发生改变时触发#xff0c;适用于大多数表单元素。
二、change: 当表单元素的值发生改变且失去焦点时触发#xff0c;适用于输入框、下拉列表等。
三、submit: 当表单提交时触发#xff0c;适用于 form 元素。
四、reset: 当表单重置时触…目录
一、input: 当表单元素的值发生改变时触发适用于大多数表单元素。
二、change: 当表单元素的值发生改变且失去焦点时触发适用于输入框、下拉列表等。
三、submit: 当表单提交时触发适用于 form 元素。
四、reset: 当表单重置时触发适用于 form 元素。
五、focus: 当表单元素获得焦点时触发。
六、blur: 当表单元素失去焦点时触发。
七、select: 当文本框或文本区域中的文本被选中时触发。 一、input: 当表单元素的值发生改变时触发适用于大多数表单元素。
表单事件input常用于实时监听输入框的变化并进行相应的处理。它适用于需要在用户输入内容时立即响应的场景例如实时搜索、输入框字符限制、动态更新计算结果等。
以下是一个简单的例子当用户在输入框中输入文字时实时统计输入的字符数并显示在页面上
!DOCTYPE html
html
headtitle实时字符统计/title
/head
bodylabel forinput-text输入文本/labelinput typetext idinput-textp idchar-count字符数0/pscript// 获取输入框和字符统计区域元素var inputText document.getElementById(input-text);var charCount document.getElementById(char-count);// 监听input事件inputText.addEventListener(input, function() {// 获取输入框的值var value inputText.value;// 统计字符数var count value.length;// 更新字符统计区域的内容charCount.textContent 字符数 count;});/script
/body
/html二、change: 当表单元素的值发生改变且失去焦点时触发适用于输入框、下拉列表等。
表单事件change适用于需要监听表单元素值的变化并在值发生变化后进行相应处理的场景。它与input事件不同之处在于change事件在用户提交表单或离开表单元素时才会触发而input事件在用户每次输入时都会触发。
以下是一个简单的例子当用户选择不同的选项时根据选择的选项显示不同的提示信息
!DOCTYPE html
html
headtitle选择提示信息/title
/head
bodylabel forselect-option选择选项/labelselect idselect-optionoption valueoption1选项1/optionoption valueoption2选项2/optionoption valueoption3选项3/option/selectp idmessage请选择一个选项/pscript// 获取选择框和提示信息元素var selectOption document.getElementById(select-option);var message document.getElementById(message);// 监听change事件selectOption.addEventListener(change, function() {// 获取选择的值var selectedValue selectOption.value;// 根据选择的值显示相应的提示信息if (selectedValue option1) {message.textContent 您选择了选项1;} else if (selectedValue option2) {message.textContent 您选择了选项2;} else if (selectedValue option3) {message.textContent 您选择了选项3;}});/script
/body
/html三、submit: 当表单提交时触发适用于 form 元素。
表单事件submit适用于需要在用户提交表单时执行一些操作的场景。通过监听submit事件可以在用户点击提交按钮或按下回车键提交表单时触发相应的处理函数例如数据验证、表单提交等操作。
以下是一个简单的例子当用户提交表单时通过JavaScript的submit事件在控制台输出表单数据
!DOCTYPE html
html
headtitle表单提交/title
/head
bodyform idmy-formlabel forname姓名/labelinput typetext idname namename requiredlabel foremail邮箱/labelinput typeemail idemail nameemail requiredbutton typesubmit提交/button/formscriptvar form document.getElementById(my-form);form.addEventListener(submit, function(event) {event.preventDefault();// 获取表单数据var name document.getElementById(name).value;var email document.getElementById(email).value;// 输出表单数据到控制台console.log(姓名:, name);console.log(邮箱:, email);});/script
/body
/html四、reset: 当表单重置时触发适用于 form 元素。
reset事件在表单重置时触发可以用于执行一些重置操作或者在重置表单时进行一些特定的处理。以下是一个简单的例子
!DOCTYPE html
html
headtitle表单重置/title
/head
bodyform idmy-formlabel forname姓名/labelinput typetext idname namename valueJohn Doelabel foremail邮箱/labelinput typeemail idemail nameemail valuejohndoeexample.combutton typereset重置/button/formscriptvar form document.getElementById(my-form);form.addEventListener(reset, function(event) {// 在重置表单时执行特定的操作console.log(表单已重置);// 可以在这里进行一些其他的处理例如清空输入框内容、恢复默认选项等});/script
/body
/html五、focus: 当表单元素获得焦点时触发。
focus事件在表单元素获取焦点时触发可以用于在用户焦点进入表单元素时执行一些特定的操作。以下是一个简单的例子
!DOCTYPE html
html
headtitle表单焦点/title
/head
bodyformlabel forname姓名/labelinput typetext idname namenamelabel foremail邮箱/labelinput typeemail idemail nameemailbutton typesubmit提交/button/formscriptvar nameInput document.getElementById(name);var emailInput document.getElementById(email);nameInput.addEventListener(focus, function(event) {// 在姓名输入框获取焦点时执行特定的操作console.log(姓名输入框获取焦点);});emailInput.addEventListener(focus, function(event) {// 在邮箱输入框获取焦点时执行特定的操作console.log(邮箱输入框获取焦点);});/script
/body
/html在上述例子中我们分别监听了姓名输入框和邮箱输入框的focus事件并在事件处理函数中执行一些特定的操作。在这个例子中我们简单地在控制台输出了一条消息来表示哪个输入框获取了焦点。你可以根据具体需求在focus事件中添加自定义的操作例如显示辅助提示、改变样式等。
六、blur: 当表单元素失去焦点时触发。
blur事件在表单元素失去焦点时触发可以用于在用户焦点离开表单元素时执行一些特定的操作。以下是一个简单的例子
!DOCTYPE html
html
headtitle表单失去焦点/title
/head
bodyformlabel forname姓名/labelinput typetext idname namenamelabel foremail邮箱/labelinput typeemail idemail nameemailbutton typesubmit提交/button/formscriptvar nameInput document.getElementById(name);var emailInput document.getElementById(email);nameInput.addEventListener(blur, function(event) {// 在姓名输入框失去焦点时执行特定的操作console.log(姓名输入框失去焦点);});emailInput.addEventListener(blur, function(event) {// 在邮箱输入框失去焦点时执行特定的操作console.log(邮箱输入框失去焦点);});/script
/body
/html在上述例子中我们分别监听了姓名输入框和邮箱输入框的blur事件并在事件处理函数中执行一些特定的操作。在这个例子中我们简单地在控制台输出了一条消息来表示哪个输入框失去了焦点。你可以根据具体需求在blur事件中添加自定义的操作例如校验输入内容、保存数据等。
七、select: 当文本框或文本区域中的文本被选中时触发。
select事件在用户选择文本时触发它适用于需要对选定文本进行操作或响应的场景。以下是一个简单的例子
!DOCTYPE html
html
headtitle文本选择/title
/head
bodyp请在下方文本框内选择一段文本/ptextarea idmyTextarea rows4 cols50/textareascriptvar textarea document.getElementById(myTextarea);textarea.addEventListener(select, function(event) {// 在文本选择发生时执行特定的操作var selectedText textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);console.log(选中的文本, selectedText);});/script
/body
/html在上述例子中我们监听了文本框的select事件并在事件处理函数中获取了选中的文本。通过使用textarea.selectionStart和textarea.selectionEnd属性我们可以获取到选中文本的起始位置和结束位置然后使用substring方法提取出选中的文本。在这个例子中我们简单地在控制台输出了选中的文本内容。你可以根据具体需求在select事件中添加自定义的操作例如执行剪切、复制、格式化等操作。
