分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

js 文本框文本域focus时自动选中内容

发布时间:2023-09-06 02:22责任编辑:苏小强关键词:js
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title>自动选择</title> ???<link rel="stylesheet" href=""></head><body> ???<h1>focus时自动选中内容</h1> ???<input type="text" autoselect start="2" end="4" value="这是内容这是内容这是内容"> ???<br><br> ???<textarea autoselect>这是内容这是内容这是内容</textarea> ???<!-- 引入jquery --> ???<script ?????src="https://code.jquery.com/jquery-3.3.1.min.js" ?????integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" ?????crossorigin="anonymous"></script> ???<script> ???/** ????* 自动选择文本框/文本域中的内容 ????* @param ?{dom} e [必填,必须是input或者textarea] ????* @param ?{开始索引值} s [默认:0] ????* @param ?{[type]} t [默认:总长度] ????* @return {[type]} ??[null] ????*/ ???function autoselect(e,s,t){ ???????var startIndex = s ? Number(s) : 0; ???????var stopIndex = t ? Number(t) : $(e).val().length; ???????if (e.setSelectionRange) { ???????????e.setSelectionRange(startIndex, stopIndex); ???????} else if (e.createTextRange) { ???????????var range = e.createTextRange(); ???????????range.collapse(true); ???????????range.moveStart(‘character‘, startIndex); ???????????range.moveEnd(‘character‘, stopIndex - startIndex); ???????????range.select(); ???????} ???????e.focus(); ???} ???$("[autoselect]").on("focus",function(e){ ?????var start = $(this).attr("start"); ?????var end = $(this).attr("end"); ?????autoselect(this, start , end); ???}); ???</script></body></html>

效果:

js 文本框文本域focus时自动选中内容

原文地址:https://www.cnblogs.com/mankii/p/9957058.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved