js实现鼠标点击文本框自动选中内容的方法


Posted in Javascript onAugust 20, 2015

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法。分享给大家供大家参考。具体如下:

这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了。

先来看看运行效果截图:

js实现鼠标点击文本框自动选中内容的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
 document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
 document.form1.content.select();}
}
</script>
</head>
<body style="font-size:12px">
<table width="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">
 <form name="form1">
 <tr bgcolor="#214994">
  <td height="25" colspan="2"><div align="center"><font color="#FFFFFF">新闻信息修改</font></div></td>
 </tr>
 <tr>
  <td width="80" height="28"><div align="right"><font color="#214994">新闻标题:</font></div></td>
  <td width="363"><input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()"></td>
 </tr>
 <tr>
  <td height="20"><div align="right"><font color="#214994">新闻内容:</font></div></td>
  <td rowspan="2"><textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>
 </tr>
 <tr>
  <td height="10"> </td>
 </tr>
 <tr>
  <td height="32" colspan="2">
  <div align="center">
   <input name="add" type="submit" id="add" value="添加">
 
   <input name="Submit" type="reset" value="重置">
  </div></td>
 </tr>
 </form>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
javascript常用的方法整理
Aug 20 #Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
You might like
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python异常处理try except过程解析
2020/02/03 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
通过实例解析python and和or使用方法
2020/11/14 Python
高中同学聚会邀请函
2014/01/11 职场文书
科研先进个人典型材料
2014/01/31 职场文书
团委竞选演讲稿
2014/04/24 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
药店营业员岗位职责
2015/04/14 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
浅谈python中的多态
2021/06/15 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
一级电子管军用接收机测评
2022/04/05 无线电
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript