jsでラベルのテキストをクリックするとテキストボックスにテキストが表示されるようにする方法_javascriptスキル

js はクリック ラベル テキストを実装し、テキスト ボックスにテキストが表示されます。一般に、1 つの方法の方が機能が若干異なります。

最初の方法: 任意のラベルをクリックするとテキスト ボックスに表示され、ラベルを 2 回目にクリックすると、対応するテキストがテキスト ボックスから消えます。

<style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style>
<input id="i" type="text" ><div class="c" id="c0">市级,</div><div class="c" id="c1">省级,</div><div class="c" id="c2">国家级
<script>
var x=["市级","省级","国家级"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){$("c"+i).onclick=(function(i){return function(){
var s=y.join(",").indexOf(x[i]);if(s>=0){
for(var r in y){if(y[r]==x[i]){y.splice(r,1)}}}
else{y.push(x[i])}$("i").value=y.join(" ");}})(i)}
</script>

レンダリング:

2 番目の方法: [スクリプト ホーム] ラベルをクリックすると、このラベルがテキスト ボックスに表示されます。SQL ラベルをクリックすると、[スクリプト ホーム] ラベルがテキスト ボックスに表示されます。テキストボックス。

<style>.label {cursor:pointer}</style>

<input type="text" id="textbox" size = "30" name="chaxinmd" />
<span class="label">JS特效</span>
<span class="label">C++</span>
<span class="label">SQL</span>
<span class="label">脚本之家</span>
<script type="text/javascript">
spans=document.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="label")
{  spans[i].onclick=function()
{    document.getElementById('textbox').value=this.innerHTML; 
 }}}
 </script>

レンダリング:

ここで、もう 1 つの Javascript のヒントを共有したいと思います。-----JS では、フォーム内のデフォルトのテキストをクリアするためにテキスト ボックスをクリックすることができます。フォームに入力するときもあります。コンテンツを削除すると、フォームにデフォルトのテキストが表示されますが、プロンプトテキストを 1 つずつ削除する必要はありません。以下は、私が皆さんのために用意した小さなコードです:

<form action="" method="get" name="so_box" id="so_box">

<input name="so_name" type="text" id="so_name" onFocus="if(value==defaultValue){value='';}"
onBlur="if(!value){value=defaultValue;}"
value="请输入的关键词">

<input type="submit" name="Submit" value="提交" onFocus="if(so_box.so_name.value==so_box.so_name.defaultValue){so_box.so_name.value='';}">

</form>

レンダリング:

テキストボックスをクリックした後

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。