キーボードの上下左右キーを実装してテキストを選択し、テキストボックスに表示するjsメソッド_javascriptスキル
この記事の例では、キーボードの上下左右キーを使用してテキストを選択し、テキスト ボックスに表示する js メソッドを実装します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SimulateUpDownKeySelect.html</title>
<style type="text/css">
#divSelect {border:1px solid red; width:208px !important;width:210px;}
#divSelect ul {width:200px;margin:3px; margin-left:-35px;*margin-left:3px;overflow:hidden}
#divSelect ul li {float:left; list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px}
#divSelect li:hover {background :green;cursor:pointer}
#txtInput {width:205px;}
</style>
</head>
<body>
<form method="post" action="##">
<input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" />
<!--
防止回车键触发表单提交
onKeyPress
-->
<div id="divSelect">
</div>
<script type="text/javascript">
var list="<ul>"
list+="<li>科幻片</li><li>战争片</li><li>动作片</li><li>爱情片</li><li>剧情片</li><li>记录片</li><li>综艺片</li><li>喜剧片</li><li>动画片</li><li>励志片</li><li>恐怖片</li><li>古装片</li><li>电视剧</li><li>读书</li><li >小说</li><li>作品集</li><li>历史</li><li>诗歌</li><li >散文</li><li>军事</li>";
list+="</ul>"
document.getElementById('divSelect').innerHTML=list;
</script>
</form>
<script type="text/javascript">
<!--
function $(sId)
{
return document.getElementById(sId);
}
function clearSelectedOptBgColor(target)
{
if (target.seletedIndex >= 0)
target.options[target.seletedIndex].style.background = "";
}
function setSelectedOptBgColor(target)
{
target.options[target.seletedIndex].style.background = "green";
}
var upKeyCode = 38;
var downKeyCode = 40;
var enterKeyCode = 13;
var oInput = $("txtInput");
oInput.options = $("divSelect").getElementsByTagName("li");
oInput.seletedIndex = -1;
oInput.focus();
//oInput.onKeyPress{}
oInput.onkeyup = function(event){
if (event == undefined)
event = window.event;
switch (event.keyCode)
{
case 37:
clearSelectedOptBgColor(this);
this.seletedIndex--;
if (this.seletedIndex < 0)
this.seletedIndex = this.options.length - 1;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case 38:
clearSelectedOptBgColor(this);
this.seletedIndex= this.seletedIndex-4;
if (this.seletedIndex < 0)
this.seletedIndex = this.options.length - 1;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case 39:
clearSelectedOptBgColor(this);
this.seletedIndex++;
if (this.seletedIndex >= this.options.length)
this.seletedIndex = 0;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case 40:
clearSelectedOptBgColor(this);
this.seletedIndex= this.seletedIndex+4;
if (this.seletedIndex >= this.options.length)
this.seletedIndex = 0;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case enterKeyCode:
this.value = this.options[this.seletedIndex].innerHTML;
//alert('aa')
break;
}
};
oInput.onblur = function(){
clearSelectedOptBgColor(this);
this.seletedIndex = 1;
};
//-->
</script>
</body>
</html>この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1677
14
1430
52
1333
25
1278
29
1257
24
ショートカットキーで右クリックメニューを開く方法
Jan 14, 2024 pm 03:12 PM
マウスが一時的に機能しなくなった場合、キーボード ショートカットを使用して右クリック メニューを開くにはどうすればよいですか? 2 つの方法があります。1 つは Shift+F10 ショートカット キーを押して右クリック メニューを調整する方法です。 Windows と Ctrl の間のキーボード ショートカット。ディレクトリ キーも使用できます。以下の具体的なチュートリアルを見てみましょう。キーボード ショートカットを使用して右クリック メニューを開く 1 つ目の方法: 1. コンピューターのデスクトップでファイルが選択されていないときに、下の図のキーボードの赤丸でマークされたボタンを押します。右クリックメニュー。 2. デスクトップ上で右クリック メニューを開くことができます。項目を選択する必要がある場合は、マウスを使用して選択します。2 番目の方法 1. 実際には、「Shift+F10」ショートカット キーを使用して調整できます。右クリックメニュー2
キーボードで下線を入力する方法?入力せずに下線だけを入力する方法?
Feb 22, 2024 pm 07:46 PM
入力方法を英語に調整し、Shift キーとマイナス キーを押したままにします。チュートリアルの適用モデル: Lenovo AIO520C システム: Windows 10 Professional エディション: Microsoft Office Word 2022 分析 1 まず、入力方法の中国語と英語の入力を確認し、英語に調整します。 2 次に、キーボードの Shift キーとマイナス キーを同時に押します。 3 インターフェイスをチェックして、下線付きの単語を確認します。補足：Word文書に下線を素早く入力する方法 1. Wordで下線を入力する必要がある場合は、マウスでスペースを選択し、フォントメニューで入力する下線の種類を選択します。概要/注意事項: 続行する前に必ず入力方法を英語に変更してください。そうしないと、アンダースコアを正常に入力できません。
Windows ラップトップでのキーボードの自動入力
Feb 19, 2024 pm 05:33 PM
キーボードやマウスなどのコンピュータ入力デバイスは人間の操作が必要であり、単独で動作することはできません。 Windows ラップトップのタッチパッドとキーボードにも同じことが当てはまります。テキストは自動的に入力されず、マウスも自動的にクリックされません。何か異常なことが起こったら、必ず理由があるはずです。ノートパソコンのキーボードの自動入力の問題が発生した場合は、ガイドに従って問題を解決してください。 Windows ラップトップのキーボードが自動的に入力される Windows ラップトップのキーボードが自動的に入力される場合、それを修正する方法は次のとおりです。キーボードを手動で確認します キーボードが適切に動作していることを確認します ラップトップがリモートに接続されているかどうかを確認します 自動入力プログラムが実行されているかどうかを確認します マルウェア スキャンを実行します キーボード設定を調整します キーボード ドライバーを再インストールします 詳しく知りましょう
Apple 携帯電話のキーボードで手書き入力方法を設定する方法
Mar 08, 2024 pm 02:30 PM
Apple モバイル キーボード ユーザーは、手書き入力方法を設定したいと考えていますが、その方法がわかりません。実際には非常に簡単です。ユーザーは、携帯電話のキーボード設定で手書き入力方法を直接選択できます。そうでない場合は、手動で追加することもできます手書き入力方式です。 Apple 携帯電話のキーボードで手書き入力方法を設定する方法 A: キーボード設定で直接手書き入力方法を有効にする 1. Apple ユーザーが入力方法を使用する場合、手書き入力方法はデフォルトで有効になります。 2. ユーザーは、入力中に左下隅をクリックして押し続けるだけで手書き入力方法を選択できます。 3. ユーザーが携帯電話に手書き入力メソッドを持っていない場合は、手動で追加することもできます。 4. ユーザーは設定を入力し、ユニバーサル キーボード設定を見つけて、最初のキーボードに手書き入力オプションを追加します。 5. 手書き入力方法を使用して、
Windows 11 のキーボードに Copilot ボタンを割り当てる方法
Feb 20, 2024 am 10:33 AM
今後数か月以内に発売される Windows 11 コンピューターのキーボードには、新しい Copilot キーが搭載される予定です。このキーを使用すると、ユーザーは新しい PC をアップグレードすることなく、指定されたボタンを押すだけで簡単に副操縦士モードに入ることができます。このガイドでは、Windows 11 キーボードの副操縦士ボタンを設定する方法について詳しく説明します。 Microsoft は最近、人工知能による運転支援の進歩において重要な進歩を遂げたと発表しました。 Windows 11 では、PC ユーザーのエクスペリエンスをさらに向上させるために専用の Copilot キーが追加されます。このハードウェアの変更は、Windows PC キーボードに対する 30 年間で初めてのメジャー アップグレードとなります。今後数か月以内に、新しい Windows 11 コンピュータのキーボードには新しい Copilot キー デザインが搭載される予定です
VGN との提携ブランド「Elden's Circle」キーボードおよびマウス シリーズ製品が店頭に並びました: Lani / Faded One カスタム テーマ、99 元から
Aug 12, 2024 pm 10:45 PM
8月12日のこのサイトのニュースによると、VGNは8月6日に、Lani/Faded Oneのカスタマイズされたテーマでデザインされたキーボード、マウス、マウスパッドを含む共同ブランドの「Elden Ring」キーボードおよびマウスシリーズを発売しました。の製品はJD.comに掲載されており、価格は99元からです。このサイトに添付されている共同ブランドの新製品情報は次のとおりです。 VGN丨Elden Law Ring S99PRO キーボード このキーボードは、純粋なアルミニウム合金シェルを使用し、5 層サイレンサー構造によって補完され、GASKET 板バネ構造を使用し、単一の- キースロット付き PCB、独自の高さの PBT 素材キーキャップ、アルミニウム合金のパーソナライズされたバックプレーン、VHUB に接続された 3 つのモード接続と SMARTSPEEDX 低遅延テクノロジーをサポートし、549 元から複数のデバイスをワンストップで管理できます。 VGN丨Elden French Ring F1PROMAX ワイヤレスマウス マウス
Maicong K87 3モードメカニカルキーボードに「ヒヤシンス軸」と「アイスクリーム軸」バージョンが追加：ガスケット構造、初期価格は299元から
Feb 29, 2024 pm 05:00 PM
2月29日の本ウェブサイトのニュースによると、Maicongは本日、K87 3モードメカニカルキーボード用に「ガスケット構造、80％配置」、関連シャフトを備えた「ヒヤシンススイッチ」と「グレーズドアイスクリームスイッチ」の2つのバージョンを発売したと発表した。キーボードの価格情報は次のとおりです: 「Hyacinth Switch」バージョン: 初期価格は 299 元 「Liuguang Ice Cream Switch」バージョン: 初期価格は 379 元 報告によると、このシリーズのキーボードはガスケット構造を使用しており、87 キー 80 %配列、フルキーロールオーバー、およびサーマルサポート プラグの抜き差しには、「オリジナル/MDA 2色PBTキーキャップ」を使用すると主張し、1.2mmのシングルキースロット付きPCB（下部ランプ位置）を使用し、RGBを装備照明効果があり、磁気吸収ネームプレートデザインを採用しています。なお、このキーボードは6000mAhのバッテリーを搭載しており、ワイヤレス遅延は3msですが、キーボードの正式なサイズやサイズは発表されていません。
Ubuntuシステムのキーボードレイアウトをアメリカンキーボードに変更するにはどうすればよいですか?
Jan 12, 2024 pm 12:39 PM
システムキーボードレイアウトをアメリカンキーボードに変更するには、Ubuntuシステムでどのように変更すればよいですか?以下に具体的な設定方法を見ていきましょう。 1. デスクトップ上で右クリックし、openterminal を開き、コマンドを入力します。 2. 管理者パスワードを入力し、タイプに応じてコンピュータを選択するだけです。 3. 国名として英語 (us) を選択し、Tab キーを押して [OK] を選択します。 4. 米国を表すキーボード レイアウトとして英語 (us) を選択し、図 2 で修飾キーを設定します。 5. [altgr] 機能を有効にするキーの組み合わせを選択します。「いいえ」を選択すると、キーの組み合わせは必要ありません。次に「はい」を選択すると、キーボード レイアウトを英語 (us)、つまりアメリカン キーボードに設定できます。
