現在の選択範囲をHTMLフォームにフォーカスするにはどうすればよいですか？

-4

私はユーザーが答えなければならない複数の質問を持つHTMLフォームを持っています。私はいくつかのスタイルを追加したいと思います。ユーザーが質問をクリックしたときに、現在の選択範囲をHTMLフォームにフォーカスするにはどうすればよいですか？

これは私が作ったフォームですが、入力フィールドをクリックしたときにdivの不透明度を変更すると、これに近づく方法を提案してください。

$(document).on('focus active', 'input, textarea', function(){ 
 
        $('label[for='+$(this).attr('id')+']').addClass('active'); 
 
       }); 
 
       $(document).on('blur', 'input, textarea',function(){ 
 
        $('label[for='+$(this).attr('id')+']').removeClass('active'); 
 
       });

input[type=text], input[type="email"],input[type="number"] { 
 
    width: 50%; 
 
    display: block; 
 
    padding: 5px 5px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
    border: none; 
 
    border-bottom: 2px solid #ccc; 
 
} 
 
      input:focus { 
 
    outline: none; 
 
} 
 
div { 
 
    opacity: 0.5; 
 
} 
 
.active{ 
 
    font-size: 50px; 
 
    color: darkgray; 
 
    opacity: 1 px !important; 
 
}

<!doctype html> 
 
<body> 
 
    <head> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
 
     </script> 
 

 

 
     </head> 
 
      <div> 
 
       <label for="contact_form_name"><span class="qno">1.</span> What is your name?*</label> 
 
       <input id="contact_form_name" name="contact_form_mail" type="text"> 
 
      </div> 
 
      <div> 
 
       <label for="contact_form_phone"><span class="qno">2.</span>What is your contact number?*</label> 
 
       <input id="contact_form_phone" name="contact_form_phone" type="number"> 
 
      </div> 
 
      <div> 
 
       <label for="contact_form_email"><span class="qno">3.</span>What is your email address?**</label> 
 
       <input id="contact_form_email" name="contact_form_email" type="email"> 
 
      </div> 
 
      <div> 
 
       <label for="contact_form_city"><span class="qno">4.</span>Which city do you live in?*</label> 
 
       <input id="contact_form_city" name="contact_form_city" type="text"> 
 
      </div> 
 
      
 
</body>

出典

2016-09-29 behind13

すごい、アプリケーション全体を書いて欲しいですか？単純なjavascriptまたはjquery/prototypejs/mootoolsのみが許可されていますか？ –

他のオーバーレイのようなものを実現したいもの –

あなたはそれぞれのdivのために専用のIDを持つ必要があります（それぞれの質問は、私が思うのdivの内側になります）。その後、こんにちはに追加するにはjQueryのを使用することになります。また、これらの質問のIDを含む配列を移入し、

出典

2016-09-29 08:57:18 Phoenix

を集中し、あいまいにループを繰り返すことができ、フォーカスを使用して、ID

document.getElementById("your_id").blur(); 
document.getElementById("your_id").focus();

に基づくJavaScriptのイベントをぼかしますクラスeg.focusedはユーザーがいる質問に焦点を当て、他のクラスはすべて別のクラスを追加します。

jQueryのは、追加の他のすべてのdiv要素を追加し、その後に、今選択のdiv

$(this).addClass('focused');

にクラスを追加するには、クラス以外に焦点を当てたので、あなたが持っているでしょう

$('class_name_of_all_div').addClass('focused');

この

に似たHTMLレイアウト

<div class="question"> 
    <input type="text" name="name" >Name</input> 
</div> 
<div class="question"> 
    <input type="text" name="name" >Name</input> 
</div 
<div class="question"> 
    <input type="text" name="name" >Name</input> 
</div

あなたの機能は次のようになります

$(".question").click(function() { 
    $(this).addClass('focused'); 
    $('.question').addClass('focused'); 
});

今、あなたはそれ

.non-focused { 
    filter: blur(2px); 
}

と

.non-focused { 
    filter: blur(0px) !important; 
}

に焦点を当て、あなたが設定されるべきであるためにのためにスタイルを追加します。

問題がある場合は教えてください。

出典

2016-09-29 09:05:06

ありがとうございます。私はこれを試してみましょう。 – behind13

現在の選択範囲をHTMLフォームにフォーカスするにはどうすればよいですか？

答えて

関連する問題