下記のようなコードでお試しいただけると思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#searchresulttemplate').hide();
});
$(document).on('click', '#search', function(){
$('#searchresult').html('');
$('#searchresulttemplate .elements')
.clone()
.appendTo('#searchresult')
.show();
});
</script>
<title>Test</title>
</head>
<body>
<article>
<section>
<p>ボタンをクリックしたときにフォームテンプレートを複製するスクリプトでは、Tabキーを押しても複製されたラジオボタンにフォーカスが移動しません。<br>
In a script that clones a form template when a button is clicked, pressing the tab key does not move the focus to the cloned radio button.</p>
</section>
<section>
<h1>Push Search Button</h1>
</section>
<section>
<div class="content">
<button id="search" tabindex="10000">Search</button>
<div id="searchresulttemplate">
<div class="elements">
<h2>Serach Result</h2>
<div class="detailinfo">
<p>
<input type="radio" name="sampler" value="A1" tabindex="10000"><label>A1</label>
<input type="radio" name="sampler" value="A2" tabindex="10000"><label>A2</label>
</p>
<p>
<input type="checkbox" name="samplec" value="B1" tabindex="10000"><label>B1</label>
<input type="checkbox" name="samplec" value="B2" tabindex="10000"><label>B2</label>
</p>
<p><input type="text" name="samplet" value="" class="nonent issuedate" tabindex="10000"></p>
</dl>
</div>
</div>
</div>
<div id="searchresult"></div>
</div>
</section>
</article>
</body>
</html>
ログイン
ユーザー登録
FAQ
検索
