ホームページ >ウェブフロントエンド >jsチュートリアル >テキストボックスのフォーカス獲得とフォーカス喪失の判定コード_Form特殊効果

テキストボックスのフォーカス獲得とフォーカス喪失の判定コード_Form特殊効果

WBOY
WBOYオリジナル
2016-05-16 17:54:581687ブラウズ
テキスト ボックスはフォーカス イベントを失い、フォーカス イベントを獲得します

onBlur: このイベントは、入力フォーカスが失われたときに生成されます。
onFocus: 入力フォーカスが獲得されたときにファイルが生成されます。
Onchange: テキスト値が変更されると、このイベントが生成されます。
Onselect: テキストが強調表示されると、ファイルが生成されます。
onpropertychange プロパティが変更されると、このイベントが生成されます
貼り付けに関係なくkeyup onchange など、これが最も敏感です

まず、入力に直接書かれた JavaScript を見てみましょう

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




jquery実装メソッド

要素のフォーカス イベントには、jQuery のフォーカス関数 focus()、blur() を使用できます。

focus(): JavaScript の onfocus と同じように、フォーカスを取得するときに使用されます。
例:

コードをコピー コードは次のとおりです。

$("p").focus( ); または $("p").focus(fn)

blur(): onblur と同じように、フォーカスが失われたときに使用されます。
例:

コードをコピー コードは次のとおりです。

$("p").blur( ); または $("p").blur(fn)

コードをコピー コードは次のとおりです。


< label for= "searchKey" id="lbSearch">検索しますか? ここではラベルがテキスト ボックスをカバーしており、スタイルをより適切に制御できます



jQuery コード

コードをコピー コードは次のとおりです。

$(function() {
$(' #searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur( function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch '). text('シェンマを探しますか?');
});
})

わかりました、かなり良いです

簡単な例を示します:

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





無題ドキュメント
;
function tt(){
var i=document.form1.text1.value;

if(i.length>=6)
document.getElementById("s1" )。 innerHTML="ユーザー名は 6 文字を超えることはできません";
else
document.getElementById("s1").innerHTML="";
}
function a(){
var j =document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="パスワードは 6 文字以下にする必要があります"
else
document.getElementById("s2").innerHTML="";




ユーザー名:


パスワード:
< ; br />
/html>




最初のタイプ: html5

html5 は、電子メール、電話番号、番号、時間、必須、オートフォーカス、プレースホルダーなどのいくつかの新しい属性をフォームのテキスト ボックスに追加します。属性はフォーム効果に大きな変化をもたらします。
プレースホルダーはその 1 つで、テキスト ボックスを完成させながらフォーカスを取得したり、フォーカスを失ったりすることができます。入力の値が空であり、プレースホルダーのコンテンツがページに表示される内容であることを確認する必要があります。
コードは次のとおりです:
コードをコピーします コードは次のとおりです:




2 番目: jQuery

原則: の val 値を作成します。タイトルの値と等しい形式。
コードは次のとおりです:
コードをコピーします コードは次のとおりです:



コードをコピー コードは次のとおりです。