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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 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 在线翻译函数代码
2009/05/07 PHP
php 正则表达式小结
2009/08/31 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
javascript prototype 原型链
2009/03/12 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
PyQt5 多窗口连接实例
2019/06/19 Python
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
信息管理专业推荐信
2013/10/29 职场文书
学习党章思想汇报
2014/01/07 职场文书
机关门卫制度
2014/02/01 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
感恩教师主题班会
2015/08/12 职场文书
Python实现天气查询软件
2021/06/07 Python