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程序来实现动画功能
Mar 06 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
JavaScript修改css样式style
2008/04/15 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
JavaScript实现轮播图效果
2020/10/30 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python字符类型的一些方法小结
2016/05/16 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python基础 range的用法解析
2019/08/23 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
《桃林那间小木屋》教学反思
2014/05/01 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
python函数的两种嵌套方法使用
2022/04/02 Python