js进阶 9-10  html控件如何实现点击自动选择控件内容

一、总结

一句话总结：

1、在click事件中，如果focus，那就select

2、blur

1、html中控件添加两种方式？

在表单中加方法的方式就不用再去选择元素了

事件的两会两种方式：

知控件方式：在控件中直接调用事件

不知控件方式：选择到控件，然后添加时间

2、html控件常用的事件（五种）？

click focus blur select change

3、html中blur事件是干嘛的？

从文本域上移开焦点

4、html中select事件是干嘛的？

选取文本域中的内容

5、html元素出发事件或者添加事件的方法？

element直接点事件就好，如果是添加事件，匿名函数ok的。htmlElement.事件

二、js进阶 9-10  html控件如何实现点击自动选择控件内容

1、案例描述

自动选择文本

  • 案例要点：某些时候我们希望用户可以很方便的对文本框中的内容进行编辑操作，这时候常会出现这样的功能，即用户单击文本框时候，文本框中的文字会自动被选中，该功能主要用到focus()方法

2、相关知识点

Text 对象方法
  • blur()从文本域上移开焦点
  • Focus()在文本域上设置焦点
  • Select()选取文本域中的内容。

3、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>自动选择</title>

 </head>

 <body>

 <form name="form1" action="#">

     <p>主题：<input name="title" type="text" value="评论标题" onclick="select_title()"></p>

     <p>内容：<textarea name="content" onclick="select_content()"></textarea></p>

     <input type="submit" value="提交">

 </form>

 <script>

     function select_title(){

         if (document.form1.title.focus) {

             document.form1.title.select()

         }

     }

     function select_content(){

         if (document.form1.content.focus) {

             document.form1.content.select()

         }

     }

 </script>

 </body>

 </html>

三、测试题-简答题

1、html中控件添加两种方式？

在表单中加方法的方式就不用再去选择元素了

事件的两会两种方式：

知控件方式：在控件中直接调用事件

不知控件方式：选择到控件，然后添加时间

2、html控件常用的事件（五种）？

click focus blur select change

3、html中blur事件是干嘛的？

从文本域上移开焦点

4、html中select事件是干嘛的？

选取文本域中的内容

5、html元素出发事件或者添加事件的方法？

element直接点事件就好，如果是添加事件，匿名函数ok的。htmlElement.事件

 

js进阶 9-10 html控件如何实现点击自动选择控件内容的更多相关文章

  1. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  2. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  3. Android控件——AutoCompleteTextView与MultiAutoCompleteTextView(实现自动匹配输入的内容)

    ------------------------------------AutoCompleteTextView----------------------

  4. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  5. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  6. js进阶 9-9 html控件如何实现回车键切换焦点

    js进阶 9-9 html控件如何实现回车键切换焦点 一.总结 一句话总结:在onkeydown事件中判断event对象的键位码,然后focus事件. 二.js进阶 9-9 html控件如何实现回车键 ...

  7. js进阶 9-6 js如何通过name访问指定指定表单控件

    js进阶 9-6 js如何通过name访问指定指定表单控件 一.总结 一句话总结:form中控件的三种访问方式:2formElement 1document 1.form中控件的三种访问方式? 1.f ...

  8. js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  9. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

随机推荐

  1. Xcode6:No architectures to compile for(ONLY_ACTIVE_ARCH=YES...)

    1.问题描写叙述 Xcode6真机測试旧project,不能执行,报错例如以下: 2.解决方式 问题非常明显,当前的执行模式设置了ONLY_ACTIVE_ARCH为Yes,当时的project的Val ...

  2. HTML基础第九讲---表单

    转自:https://i.cnblogs.com/posts?categoryid=1121494 最基本的留言版应该大家都用过吧!没错这就是一个表单运用很好的例子.表单提供了一个管道让读者发表心声, ...

  3. ORACLE11g R2【RAC+ASM→单实例FS】

    ORACLE11g R2[RAC+ASM→单实例FS] 11g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境:   primary standby OS Hostnam ...

  4. (转载)iis7下站点日志默认位置

    转自http://www.cnblogs.com/mincyw/p/3425468.html iis7下站点日志默认位置   在iis6时,通过iis管理器的日志配置可以找到站点日志存储的位置. 但是 ...

  5. Spring-Boot整合freemarker引入静态资源css、js等（转）

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...

  6. ubuntu 14 编译视频第三方库ijkplayer，能够在winows下使用

    1.先安装相关环境,详细在这里http://blog.163.com/zhuowr2006@126/blog/static/98334653201612310647799/  依据上面那个安装之后,会 ...

  7. [Preact] Integrate react-router with Preact

    React-router is the community favourite routing solution - it can handle all of your complex routing ...

  8. 恢复SLAVE上的某几张表的简要方法

    同步报错是遇到最多的一个问题,如果你修复后发现还没有解决,通常的方法就是在Master上重新dump出一份,然后在slave上恢复.这个方法是针对整个库不是很大的情况下使用的,那如果是较大,全部dum ...

  9. openCV 和GDI画线效率对比

    一. 由于项目需要,原来用GDI做的画线的功能,新的项目中考虑到垮平台的问题,打算用openCV来实现,故此做个效率对比. 二. 2点做一条线,来测试效率. 用了同样的画板大小---256*256的大 ...

  10. 前端css常用的选择小汇

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.选择器就是选择器用来指定样式的作用范围. 类选择器: 类选择器在css中比较常见,首先要在普通标签中设置 ...