検索
ホームページウェブフロントエンドjsチュートリアルテキスト ボックスのフラッシュバック入力により、入力ボックスのフォーカスが常に先頭に維持されます_JavaScript スキル

いわゆるテキストボックスのフラッシュバック入力とは、図に示すように、入力ボックスのフォーカスが常に先頭にあることを意味し、123456789を入力すると、入力ボックスに987654321が表示されます。


なぜこのデモをやりたいのですか?それは、プロジェクトでこれに遭遇したためです。プロジェクトの要件は、前方入力用と後方入力用の 2 つの入力ボックスです。 以下に実装のアイデアとコードを書いていきます。
テキストフラッシュバック入力:

入力ボックスのフォーカスが常に先頭にあることを確認している限り、入力するたびに先頭にある、つまりフラッシュバックがあることがわかります

コード:

function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}

パラメータ pos を 0 に設定している限り。

以下は完全なデモで、通常の削除とフラッシュバック入力を実装しています。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}

</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div >
<ul>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
</ul>
</div>
<script>
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
$('.elem').on('keypress keyup', function() {
if(event.keyCode === 8)
return;
setPosition(this,0);
});
</script>
</body>
</html>

その他、フォーカス位置を取得するための関連関数も付属していますので、ご利用ください

function getPosition(ctrl) {
// IE Support
var CaretPos = 0; 
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}

概要:

テキスト入力フォーカスを設定して取得した後、単語や変数全体の削除など、他の特殊効果を実行できます。

この記事に関する良いアイデアがあれば、@me までお知らせください。この記事がお役に立てば幸いです。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
寻找抛物线的顶点、焦点和准线的C/C++程序寻找抛物线的顶点、焦点和准线的C/C++程序Sep 05, 2023 pm 05:21 PM

Asetofpointsonaplainsurfacethatformsacurvesuchthatanypointonthatcurveisequidistantfromapointinthecenter(calledfocus)isaparabola.Thegeneralequationfortheparabolaisy=ax2+bx+cThevertexofaparabolaisthecoordinatefromwhichittakesthesharpestturnwhereasaisth

jquery怎么去除焦点jquery怎么去除焦点Feb 17, 2023 am 10:20 AM

jquery去除焦点的方法:1、通过“document.getElementById('test').focus()”获取焦点;2、使用“document.getElementById('test').blur();”方法移除焦点即可。

使用jQuery实现输入框仅允许输入数字和小数点使用jQuery实现输入框仅允许输入数字和小数点Feb 26, 2024 am 11:21 AM

实现jQuery输入框限制数字和小数点输入在Web开发中,我们经常会遇到需求需要控制用户在输入框中输入的内容,比如限制只能输入数字和小数点。这种限制可以通过JavaScript和jQuery来实现。下面将介绍如何使用jQuery实现输入框限制数字和小数点输入的功能。一、HTML结构首先,我们需要在HTML中创建一个输入框,代码如下:

Vue开发中输入框长度限制的优化方法是什么?Vue开发中输入框长度限制的优化方法是什么?Jun 30, 2023 am 08:44 AM

如何优化Vue开发中的输入框输入长度限制问题引言:在Vue开发过程中,输入框长度限制是一个常见的需求。限制用户在输入框中输入的字符个数有助于保持数据的准确性、优化用户体验以及提高系统的性能。本文将介绍如何优化Vue开发中的输入框输入长度限制问题,以提供更好的用户体验和开发效率。一、使用v-model指令绑定输入框值在Vue开发中,我们通常使用v-model指

手把手教你用CSS实现简单大气的输入框手把手教你用CSS实现简单大气的输入框Jan 13, 2023 pm 03:55 PM

本篇文章给大家带来了关于CSS的相关知识,其中主要介绍了怎么用CSS实现一个简单又高大上的输入框,手把手教你哦~下面一起来看一下吧,希望对需要的朋友有所帮助。

如何使用 Vue 实现带标签的输入框?如何使用 Vue 实现带标签的输入框?Jun 25, 2023 am 11:54 AM

随着Web应用的发展,带标签的输入框越来越受欢迎。这种输入框可以让用户更方便地输入数据,同时也方便用户对已输入的数据进行管理和搜索。Vue是一款非常强大的JavaScript框架,它可以帮助我们快速地实现带标签的输入框。本文将介绍如何使用Vue实现带标签的输入框。第一步:创建Vue实例首先,我们需要在页面上创建Vue实例,代码如下:&l

使用PHP函数 "array_unshift" 将元素插入到数组的开始位置使用PHP函数 "array_unshift" 将元素插入到数组的开始位置Jul 25, 2023 pm 03:39 PM

使用PHP函数"array_unshift"将元素插入到数组的开始位置PHP是一种广泛使用的服务器端脚本语言,用于创建动态网页。在PHP中,数组是一种非常重要的数据结构,用于存储和操作一组数据。有时候我们需要在数组的开始位置插入一个元素,这时就可以使用PHP内置函数"array_unshift"。"array_unshift"函数的作用

实现HTML页面跳转到PHP页面时姓名输入框的必填要求实现HTML页面跳转到PHP页面时姓名输入框的必填要求Mar 10, 2024 am 10:21 AM

在HTML页面跳转到PHP页面时,如果需要在姓名输入框中加入必填要求,可以通过HTML的表单元素和JavaScript实现。下面将详细介绍如何实现这一功能,并附上具体的代码示例。首先,我们创建一个HTML页面,包含一个表单和一个姓名输入框。在姓名输入框中设置一个“必填”标记,可以通过JavaScript来实现对该输入框的必填验证。当用户点击提交按钮时,如果姓

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール