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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
JavaScript中return false的用法
Mar 12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
监听element-ui table滚动事件的方法
Mar 26 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
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中使用Oracle数据库(3)
2006/10/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python中xrange和range的区别
2014/05/13 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python字典简介以及用法详解
2016/11/15 Python
pytorch 数据集图片显示方法
2018/07/26 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
打架检讨书
2015/01/27 职场文书
圣诞节开幕词
2015/01/29 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang