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. input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色

    填写form表单时发现chrome的一个好坑啊! 当你之前有填写过表单,获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东,就像这样:(抱歉丑了点,隐私问题打上了马赛克) 按理说,这 ...

  2. (转载)Javascript操作表单之间的数据传递

    (转载)http://www.aspxhome.com/javascript/skills/200710/214825.htm 今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的 ...

  3. MYSQL 注释的 3 方法

    方法 1.单行注释 # 方法 2.单行注释 -- 方法 3.多行注释 /*------*/ ------------------------------------------------------ ...

  4. BroadcastReceiver简单应用实例

    BroadcastReceiver是android四大组件之一,主要用于接收广播,它的简单实现方法如下: 1.定义继承BroadcastReceiver的MyReceiver类: /** * Crea ...

  5. linux系统管理--查看进程

    关于进程的查看,大家都不会陌生 ,主要是ps和pstree命令. ps  aux    查看系统中所有进程,使用BSD操作系统格式.(注意:不是ps -aux) 执行结果 USER :该进程是由哪个用 ...

  6. day16-面向对象基础(三)

    今日摘要 今天主要整理一下这俩天学习的内容,面向对象也快学完了,深刻的认识到面向对象就是一个思想,怎么把思想理解了,其他也就不是什么事了 1.类的约束 2.类的类方法与静态方法 3.类的反射 4.类的 ...

  7. node全局安装说明(create-react-app、)

    1.使用 create-react-app 快速构建 React 开发环境 国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ np ...

  8. [UE4]Add Offset

    在原来值的基础上增加偏移

  9. saltstack的封装和内网使用

    0.客户端使用 linux:把linux的ragent文件夹拷贝到内网linux /opt目录下,运行初始化脚本 salt服务端:# @Master:"/opt/ragent/python/ ...

  10. shell脚本之tr命令使用

    tr命令用来进行对标准输入的内容做替换.例如 # echo 'HELLO WORLD!!!' | tr "A-Z" "a-z" hello world!!! 这 ...