focus（）在输入中不起作用（所有浏览器）

Question

I know there is tons of questions like that on stackoverflow but none of them solved my problem. I'm trying to build a small "pyramid" word game. You have to find the right translation for a korean word, then a new input with a new word will pop up. Solve this word, the next input field will pop up, ...

HTML:

<input id="ha_1" class="halter" placeholder="안녕하세요"  type="text" onblur="checkSol(id);"></input><br/>
<input id="ha_2" class="halter" placeholder="얼굴" type="text" onblur="checkSol(id);"></input><br/><br/>
<input id="ha_3" class="halter" placeholder="문" type="text" onblur="checkSol(id);"></input><br/><br/>

Here is the relevant piece of code:

// compare if user input is correct solution
if (user_input == solution){
// if correct, display the next input field:
             $('#' + e_dies).nextAll('.halter:first').css('display', 'block');
    // ==> supposed to focus the fadedIn input
             $('#next_input').focus();
// count up to the next word
             l_count++;
// give correct/incorrect feedback
                    if(l_count == last_sol){
                            tell_me.innerHTML = 'Correct';
                        return false;
                    };
            } else if(document.getElementById(e_dies).value == "") {
            tell_me.innerHTML = '';
        }

This line here $('#' + e_dies).nextAll('.halter:first').css('display', 'block'); displays a input field. Right after, $('#next_input').focus(); is supposed to focus this input field , which just faded in. I tried some solutions like using setTimeout or moving it to the end of the function. Nothing worked for me.

Strangely, other commands like $('#next_input').css('color', 'red'); work just fine, just the .focus() makes trouble.

Help would be much appreciated!

Answer 1

Though the question seems to be not that clear i have implemented a small fiddle showing input box focus working on conditional value.I hope this can give some help

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function checkSol(id){ var solution="testname"; console.log(event); var user_input=event.target.value; if (user_input == solution){ // if correct, display the next input field: // ==> supposed to focus the fadedIn input $('#focusinputbox').focus(); } } </script> <input id="ha_1" class="halter" placeholder="안녕하세요" type="text" onblur="checkSol(id);" /><br/> <input id="ha_2" class="halter" placeholder="얼굴" type="text" onblur="checkSol(id);" /><br/><br/> <input id="ha_3" class="halter" placeholder="문" type="text" onblur="checkSol(id);" /><br/><br/> <input id ='focusinputbox' placeholder='inputtobefocussed'/>