82393


# **発生している問題**

音声認識で取得したテキストをinputにvalueで送信して、oninputでイベントを発火させたいのですが、プログラムからの入力では発火しないようです。

# **実現したいこと**

音声認識で取得したテキストをもとに、oninputなどで入力が終わった瞬間から一定時間が経つと入力完了と判断するというイベントを発火させたいと思っています。

# **問題のコード**

[code]

    <p class="recognize-text">ぼく、ドラ○もん</p>
    <button id="recognize">音声認識開始</button>
    <div id="endMsg">入力完了と判定しました<br>入力：</div>
    <input type="text" id="myobj" value="">
    
    <script>
            const textDisplay = document.querySelector('.recognize-text');
    
            try {
              // 音声認識
              const recognition = new webkitSpeechRecognition();
              recognition.lang = 'ja-JP';
              recognition.continuous = true;
              recognition.interimResults = true;
            
              // 認識スタート
              recognition.onstart = (e)=>{
                textDisplay.textContent = "認識中";
                textDisplay.style.color = "#aaa"
              }
    
              // 認識終了
              recognition.onresult = (e)=>{
                const str = e.results[0][0].transcript;
                textDisplay.textContent = str;
                document.getElementById("myobj").value = str;
              }
    
              document.querySelector('#recognize').onclick = (e)=>{
                recognition.start();
              }
              
              recognition.onend = function() {
                console.log('Speech recognition service disconnected');
              }
          
            } catch (error) {
              console.log(error);
            }
    
            var myobj = document.getElementById("myobj");
            var gTimer;
            myobj.oninput = () => {
    
                // =========================================================
                //   入力の度に実行される
                //     入力完了までタイマーで実行待ちする
                //     タイマーまでに次の入力があると、再度タイマー設定
                // =========================================================
                var wObj = document.getElementById("endMsg");
                wObj.innerHTML = '入力中です';
                // =============================================
                //   一定時間を待って入力完了と判断 
                // =============================================
                if(gTimer){clearTimeout(gTimer);}
                gTimer = setTimeout(inputEnd, 700);
            }
            function inputEnd(){
                var wObj    = document.getElementById("endMsg");
                wObj.innerHTML = '入力完了と判定しました<br>入力：'+document.getElementById("myobj").value;
                wObj.className = 'defStyle endStyle';
            }
    </script>
    
[/code]


CC BY-SA 4.0
2021-09-09T14:43:25.277
82384
2021-09-09T23:28:16.063
2021-09-09T16:23:57.580
7500
48008
question
javascript
プログラムから入力されたinputにoninputが反応しません。


> プログラムからの入力では発火しないようです。

それは仕様でどうしようもないので、自分のコードでイベントを発行したり、イベントリスナを呼びましょう。

たとえば、

[code]

                document.getElementById("myobj").value = str;
    
[/code]

の後に

[code]

                document.getElementById("myobj").dispatchEvent(new Event('input'));
    
[/code]

など。


CC BY-SA 4.0
2021-09-09T23:28:16.063
82393
2021-09-09T23:28:16.063
3475
82384
answer