私は送信ボタン付きのチャットボックスを作成しましたが、送信ボタンをクリックするとテキスト領域にフォーカスが失われました

Question

私のモバイルサイトでは、基本的には表示領域、書き込むテキスト領域、テキストを送信する送信ボタン問題は、テキストエリアにテキストを書き込むときです。モバイルキーパッドがポップアップし、送信ボタンを押すと、フォーカスが失われ、テキストが送信され、モバイルのキーパッドが消えると、キーパッドが送信ボタンをクリックして消えてはいけません。

Answer 1

あなたは単純に 'touchend'イベントを使用することができます

$(document).on('touchend', 'selector' ,function(){ 
    //you code goes here 
}); 

ここで、あなたの焦点はテキストエリアにとどまります。 これが役立つことを願っています。

Answer 2

<form>要素のonsubmit機能を上書きすることができます。 デフォルトでは、このフォームはすべて<input>のコンテンツを削除し、action属性で指定された内容にコンテンツを送信します。 この動作を上書きする場合は、submitイベントでpreventDefaultメソッドを呼び出してください。サンプル：

Answer 3

フォーカスあなたがテキスト領域に焦点を当ててしまいますと、キーパッドはがれに表示されるように、入力テキスト領域

var form = document.getElementById('my-form'); 
 
var input = document.getElementById('my-input'); 
 

 
form.onsubmit = function (event) { 
 
    // Prevent the form from sending the content 
 
    // and deleting it afterwards 
 
    event.preventDefault(); 
 
    
 
    // Focus the input element again 
 
    input.focus(); 
 
    
 
    // Send the content via ajax to your endpoint 
 
    alert('sending content...'); 
 
}

<form id="my-form" action="/message" method="POST"> 
 
    <input type="text" id="my-input" /> 
 
    <input type="submit" value="send" /> 
 
</form>

。

input.focus（）は、データを送信したJavaスクリプト関数で使用します。データを直接送信した後にコードを変更し、Ajaxのリクエストと応答がテキストボックスに再度フォーカスを合わせた後