プロンプトテキストメソッドを使用したタグ入力ボックス-jsチュートリアル-php.cn

プロンプトテキストメソッドを使用したタグ入力ボックス

小云云

リリース： 2018-01-26 13:18:32

オリジナル

8517 人が閲覧しました

この記事では、プロンプトテキスト効果を備えた入力ボックスを実装するためのinputタグを主に紹介します（2つの方法）。それが必要な友人は、それがすべての人に役立つことを願っています。

方法 1: HTML5 は CSS3 と連携してプロンプトテキストを含む入力ボックスを実装します (js を削除します)。

Webkit 固有の CSS は、CSS3 のアニメーション効果と疑似クラスを使用して内部のテキストスタイルを制御できます。を使用すると、システムへのログインや検索などに最適なアニメーション付きの入力ボックスを簡単に作成できます。興味がある場合は、この記事を参照してください。キャリア開発システムとして、Webkit には確かに広範な機能が必要です。 Html5 と CSS3 を使用すると、大量の JS が削減されるだけでなく、よりスムーズなフローを確保できます。

ダイアログボックスが選択されると、プロンプトテキストが明るくなり、入力後に消えます。現在では、入力ラベルの後にラベルを追加するのが一般的です。 JSコントロールを使用します。

HTML5 の出現により、より良い方法が登場しました。

<input type="text" placeholder="用户名或邮件地址" name="username"/>

ログイン後にコピー

ユーザーテキストプロンプトとして使用できるプレースホルダータグがあることがわかりました。これはとても便利です。しかし、最も完璧にするには、テキストを軽くするか、プロンプトファイルを選択した後にスタイルを変更する必要があります。 Webkit 独自の CSS である

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

ログイン後にコピー

-webkit-input-placeholder は、CSS3 のアニメーション効果と疑似クラスを使用して、内部のテキストスタイルを制御することができ、ログイン時に使用できるアニメーション入力ボックスを簡単に作成できます。検索やその他の場所へのアクセスも優れています。もちろん、IE6 と互換性を持たせたい場合は、この方法は機能しません。ただし、Ie9 はプレースホルダータグもサポートしていますが、その色は変更できません。
それでは、サポートされていない場合はどうすればよいですか? Jquery を直接使用するだけで解決できるため、この記事の範囲外です。

デモとデモのアドレスを教えてください。完全な効果を確認するには、Webkit ブラウザを使用する必要があります。とても便利ではないでしょうか？

方法 2: JS コントロール;

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

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  } 
  });
 })
 $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  }
  })
  }) 
 })
</script>

ログイン後にコピー

効果は次のとおりです。

クリックすると、プロンプトテキストが表示されます。コンテンツを入力した後にフォーカスが失われ、プロンプトテキストが表示されず、パスワードボックスがテキストボックスと異なり、パスワードボックスの値が表示されません。

方法 3: ラベルに直接書き込む (これはより実用的です)

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

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

ログイン後にコピー