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 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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中用文本文件做数据库的实现方法
2008/03/27 PHP
获取URL文件名后缀
2013/10/24 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
对Python3中的input函数详解
2018/04/22 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
幼儿教师个人总结
2015/02/05 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
react 路由Link配置详解
2021/11/11 Javascript
Nginx动静分离配置实现与说明
2022/04/07 Servers