textarea フォーカスを使用してフォーカスのクリアとフォーカスの喪失を実現するプロンプト効果_JavaScript スキル

レンダリング:

特定の実装:

1. Textarea タグの内容

コードをコピーします コードは次のとおりです:

<テキストエリア名="" id="備考"cols="" rows="" class="textarea220" onfocus="this.className=' textarea220L' ;this.onmouseout='';getAddFocus('remark');" onblur="this.className='textarea220';this.onmouseout=function(){this.className='textarea220'};lostAddFocus('remark ') ;" onmousemove="this.className='textarea220Lg'" onmouseout="this.className='textarea220'">

2. 追加ボタンをクリックすると、初期化により 50 文字まで入力できます。

コードをコピーします。 >

コードは次のとおりです: $("#introduction").val("最大 50 個まで入力できます文字"); document.getElementById("introduction").style.color="gray";

3. js スクリプト

コードをコピー

コードは次のとおりです:function getAddFocus (id){// の追加操作の場合、textarea がフォーカスを取得し、入力ボックスをクリアします。var textarea=document.getElementById(id);

textarea.value=""; .style.color="black";

}

function lossAddFocus(id){//追加操作の導入と注釈について、テキストエリアがフォーカスを失いコンテンツが空の場合、プロンプトが表示されます。メッセージが表示されます
var textarea=document.getElementById(id);
var textarea_value=textarea.value;
if(textarea_value==""){
textarea.value=" 50 文字";
textarea.style.color="gray" ;
}
}



csdn によって記述された textarea フォーカスの使用リファレンスパートナー:

コードをコピー

コードは次のとおりです:

1. テキスト ボックスにはデフォルトのテキストが表示されます。

White Pigeon Boy > White Pigeon Boy
2. テキスト ボックス上でマウスをクリックすると、デフォルトのテキストが消えます:

白いハトの男の子
ホワイトPigeon Boy< /textarea> <br> 3. マウスをテキスト ボックスに移動すると、デフォルトのテキストが消えます: <br><br><textarea onmouseover="focus()" onfocus="if(value=='White)ハトの男の子') {value =' '}">白いハトの男の子
<br/><textarea onfocus=”if( value=='白い鳩の男の子') {value=' '}" onblur="if(value==' ') {value='白い​​鳩の男の子'}">白い鳩の少年
White Pigeon Boy
5. マウスをテキスト ボックスに移動すると、デフォルトのテキストが消え、マウスをテキスト ボックスの外に移動すると、デフォルトのテキストが再び表示されます:

白い鳩の男の子
白い鳩の男の子
6.テキスト ボックスにマウスを置くと、テキスト ボックス内のテキストがすべて消えます (デフォルトのテキストと後で入力したテキストを含む):

White Pigeon Boy</ textarea> <br><textarea onclick=”value=' ''>白ピジョンボーイ
7. マウスをテキストボックスに移動すると、テキストボックス内のテキストがすべて消えます（デフォルトのテキストと後で入力したテキスト):

白鳩の男の子
White Pigeon Boy
8. テキスト ボックスをクリックしてすべてのテキスト ボックスを選択します。

White Pigeon Boy 🎜>White Pigeon Boy<br> 9. マウスをテキスト ボックスに移動して、テキスト ボックス内のすべてのテキストを選択します。 ;textarea onmouseover=”focus()” onfocus=”select()”>白い鳩の男の子< ;/textarea> <br><textarea onmouseover=”focus()” onfocus=”select()”>白い鳩の男の子< ;/textarea> <br> 10. Enter を押すと、フォーカスが現在のテキスト ボックスから次のテキスト ボックスに移動します: <br><br><textarea onkeydown=”if(event.keyCode==13)event .keyCode=9″>白いハトの男の子
白いハトの男の子 11. Enter キーを押すと、フォーカスが現在のテキスト ボックスから指定された位置に移動します。

< ;textarea onkeypress="return focusNext(this,'指定された場所の id 名',event)">白い鳩の少年/span>