HTML文本域事件与交互示例

web编程
需积分: 34 1 下载量 127 浏览量 更新于2024-07-12 收藏 1.58MB PPT 举报
"文本域事件示例 - HTML+CSS+Javascript" 本文主要介绍了一个关于文本域事件的HTML示例，展示了如何使用JavaScript处理文本输入框（`<input>`）和多行文本区域（`<textarea>`）的焦点、模糊和改变事件。在Web编程中，这些事件对于交互式用户界面的构建至关重要。 首先，HTML（HyperText Markup Language）是一种标记语言，用于创建网页结构，并通过不同的标签来控制内容的外观和功能。它支持多种元素，如`<input>`和`<textarea>`，用于用户输入数据。在这个示例中，我们看到了一个简单的HTML页面结构，包括`<head>`部分用于定义文档标题和脚本，以及`<body>`部分包含实际的表单内容。 在HTML中，`<input>`标签用于创建单行文本输入字段，而`<textarea>`则用于创建多行文本输入。在本例中，两个元素都有与之关联的JavaScript事件处理函数： 1. `onfocus`: 当文本域获得焦点时，即用户点击或通过键盘导航进入该字段时，调用`writeit`函数并传递'焦点'作为参数，弹出一个警告框显示该值。 2. `onblur`: 当文本域失去焦点，即用户点击或导航到页面上的其他位置时，`writeit`函数被调用，这次传递的参数是'模糊'，同样以警告框的形式显示。 3. `onchange`: 当用户在文本域中输入内容并离开该字段（例如，通过按Enter键或点击其他元素）导致内容发生变化时，`onchange`事件触发，`writeit`函数被调用，参数为'修改'。 JavaScript部分定义了`writeit`函数，该函数接收一个参数`value`，并使用`alert()`函数显示一个包含该值的对话框。这个函数在上述三个事件发生时执行，向用户显示相应的状态提示。 此外，HTML文档通常需要符合一定的语法规则，例如使用`<!DOCTYPE>`声明文档类型，`<html>`作为根元素，`<head>`包含元信息（如字符编码和页面标题），以及`<body>`包含可见的页面内容。在示例中，还使用了`<meta>`标签来指定字符编码为`gb2312`，确保中文字符正确显示。 在实际的Web开发中，除了基本的HTML之外，常常会结合CSS（Cascading Style Sheets）来控制页面的样式，以及JavaScript来实现动态行为。HTML编辑工具有很多，如Macromedia Dreamweaver、Microsoft FrontPage和简单的文本编辑器（如记事本），可以帮助开发者更方便地编写和管理代码。 文本域事件是Web交互中的关键组成部分，它们允许开发者响应用户的输入并提供反馈，从而提升用户体验。通过理解并熟练运用这些事件，可以创建更加动态和用户友好的网页应用。

web前端基础学习笔记

2018-01-08 上传
- **文本域**: `<textarea>`用于多行文本输入。 - **下拉框**: `<select>`用于创建下拉菜单。 - **文件选择器**: `<input type="file">`用于文件上传。 - **日期选择器**: `<input type="date">`用于选择日期。 ...

html网页标记大宝库

2008-03-13 上传
<dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl> ``` ##### 菜单列表 `<menu>` - **定义**: `<menu>` 标签定义文档或节的一组菜单选项。 - **示例代码**: ```html <menu> ...

<label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
锁定下拉文本域框

2023-05-16 上传
对于锁定下拉文本域框，你可以使用HTML中的`<select>`元素和`<option>`元素来实现。以下是一个示例代码： ``` <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select...

写一个html网页设计代码并加上注释

2023-03-25 上传
<p>This is my first webpage.</p> <!-- 段落标签 --> <h2>About Me</h2> <ul> <!-- 无序列表 --> <li>Name: John Doe</li> <!-- 列表项 --> <li>Age: 25</li> <li>Occupation: Web Developer</li> </ul> ...

layui 文本域设置

2024-09-14 上传
<title>Layui文本域示例</title> <link rel="stylesheet" href="path/to/layui/css/layui.css" media="all"> </head> <body> <form class="layui-form" action=""> <div class="layui-form-item"> <label class...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> *{margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /*自动换行*/ } </style> </head> <body>
微博内容： <textarea></textarea> <button>发布</button>
<script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('
  • '+res+'
    • '); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>改进之后的代码

    2023-06-10 上传
    <title>微博发布功能</title> <style> * { margin: 0; padding: 0; } #weibo { width: 600px; padding: 10px; border: 1px solid #000; margin: 100px auto 0; } #weibo textarea { width: 455px; ...

    html网页制作代码大全

    2023-05-24 上传
    -- 文本域 --> <label for="comment">评论：</label> <textarea id="comment" name="comment"></textarea> <!-- 提交按钮 --> <button type="submit">提交</button> </form> ``` 以上代码只是HTML制作网页中的...

    文本域插入包含css的html文件

    2023-05-12 上传
    可以使用`<style>`标签在文本域中插入CSS样式，然后在`<textarea>`标签中使用`style`属性引入该样式。 示例代码如下： ``` <!DOCTYPE html> <html> <head> <title>文本域插入包含css的html文件</title> </head> ...

    帮我用html写一个带有多选框和文本域的表单

    2023-05-26 上传
    好的，以下是一个带有多选框和文本域的 HTML 表单示例： ```html <!DOCTYPE html> <html> <head> <title>多选框和文本域表单</title> </head> <body> <form action="#" method="post"> <p>请选择您喜欢的水果：...

    完成一个表单，要求有文本输入框、单选按钮、多选按钮、下拉列表、文本域、按钮，点击按钮后显示表单内容 要求：用v-model实现数据双向绑定

    2023-04-11 上传
    <li>文本域: {{ textarea }}</li> </ul> </div> </div> </template> <script> export default { data() { return { text: '', radio: '', checkboxes: [], dropdown: '', textarea: '', formSubmitted:...
    冀北老许
    • 粉丝: 16
    • 资源: 2万+
    上传资源 快速赚钱

    最新资源