Backspace key does not delete Thai vowels on webview's Html text input

Question

I am using Android Studio 2.1.1.

I open a local html file with an input of type text in my webview. I found that the backspace key of the dynamic keyboard does not delete any of the Thai vowels which are either over or under a consonant letter. However, on the EditText view, the backspace key does not have any issue with the Thai vowels. It deletes all characters, both the Thai consonants and vowels.

MainActivity.java

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final EditText simpleEditText = (EditText) findViewById(R.id.simpleEditText);
    WebView wv = (WebView)findViewById(R.id.webview);
    wv.loadUrl("file:///android_asset/test_input.html");
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.thongjoon.edittext.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@id/simpleText"
    android:text="Hello World!"/>

<EditText
    android:id="@+id/simpleEditText"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/simpleText"
    android:hint="Enter Your Name Here" />
<WebView android:id="@+id/webview"
         android:layout_below="@id/simpleEditText"
         android:layout_width="fill_parent"
         android:layout_height="50dp"/>

</RelativeLayout>

test_input.html

<!doctype html>
<html lang="th">
   <head>
   <meta charset="utf-8">
   <title>Document</title>
   </head>
<body>
  ทดสอบ<input type="text" name="yourname" value="Your Name"><br>
</body>
</html>

I am new to Android. I really don't know how to go about this problem. Please advise.

score 0 · Answer 1 · edited May 23 '17 at 10:32

I decided not to use html input of type text. In stead, I created a JavaScriptInterface class to pass a variable to a javascript function. The variable is from an EditText view. I pass it on a button click.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.thongjoon.edittext.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@id/simpleText"
        android:text="Hello World!"/>

    <EditText
        android:id="@+id/simpleEditText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/simpleText"
        android:singleLine="true"
        android:maxLength="20"
        android:hint="Enter Text Here" />
    <Button
        android:id="@+id/btnSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/simpleEditText"
        android:text="Go"/>

    <WebView android:id="@+id/webview"
         android:layout_below="@+id/btnSearch"
         android:layout_width="fill_parent"
         android:layout_height="150dp"/>

</RelativeLayout>

test_input.html

<!doctype html>
<html lang="th">
<head>
  <meta charset="utf-8">
  <title>Document</title>

</head>
<body>

  ทดสอบการส่งตัวแปรจาก Android<br>
  Passing a variable from Android to Javascript<br>

  <script>
    function init(val){
      alert(val);
    }
  </script>
</body>

JavaScriptInterface.java

import android.content.Context;
import android.webkit.JavascriptInterface;

public class JavaScriptInterface {
    Context mContext;
    JavaScriptInterface(Context c) {
        mContext = c;
    }
    @JavascriptInterface
    public static String getFromAndroid(String myVar) {
        return myVar;
    }
}

MainActivity.java

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    String inputText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // hide virtual keyboard. Show keyboard when user touches EditText view
        getWindow().setSoftInputMode(
            WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN
        );

        setContentView(R.layout.activity_main);

        final EditText simpleEditText = (EditText) findViewById(R.id.simpleEditText);
        final Button btn_search =(Button) findViewById(R.id.btnSearch);

        final WebView webView = (WebView)findViewById(R.id.webview);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        //for showing Javascript alert box
        webView.setWebChromeClient(new WebChromeClient() {});
        webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
        webView.loadUrl("file:///android_asset/test_input.html");

        btn_search.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                //hide virtual keyboard
                InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                       inputMethodManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
            inputText = simpleEditText.getText().toString();
            webView.loadUrl("javascript:init('" + inputText + "')");
            }
        });
    }
}

Many thanks to the following links;

Passing data from java class to Web View html

Get Value of a Edit Text field How to pass a value/variable from an android java class to javascript/.html file in android 4.4.2 kitkat

Passing data from java class to Web View html

Backspace key does not delete Thai vowels on webview's Html text input

1 Answers1