Android WebKit сфокусированный textarea не будет рисовать фоновое изображение

Ответ 1

ИЗМЕНИТЬ

Хорошо, поэтому забывайте все, что я ранее ответил. Я провел несколько тестов, и это, похоже, проблема только для Android 4.0.3. И есть плохие новости.

Я начал копаться в источнике, и я считаю, что проблема кроется в классе WebTextView. Класс, который обрабатывает текстовые поля и текстовые поля.

Если вы видите строки 233-240, метод, который рисует фон, всегда рисует синий прямоугольник и белый прямоугольник внутри. Это именно то, что показывает ваш скриншот.

Хорошим решением было бы расширить этот класс и исправить его. К сожалению, нет класса WebTextView в sdk. Это означает, что вы не можете переопределить его.

Я пробовал всевозможные javascript для изменения цвета textarea, даже перекрывая элемент, но это не помогает. Это не то, что мы можем достичь из html-кода.

Поэтому вы не можете исправить это на java, и вы не можете исправить его на javascript. Боюсь, что решения этой проблемы нет.

EDIT

Я стою исправлено. Благодаря @grandstaish для фокуса, мы можем легко изменить цвет фона после создания TextView. Я попытался использовать ViewTreeObserver для элегантного решения, но я не мог настроить таргетинг только на те взгляды, которые я хотел. Каждый TextView имел бы прозрачный фон, и я не хотел этого. Таким образом, гибридный подход решил:

HTML:

 <div style="background:red; position:relative; width:100%; height:500px; z-index:0;" id='behind' >
    <textarea name="Name"style="background:green; border:none; height:100px; width:250px; position:absolute; top:0; left:0; z-index:1;" 
            id='area1' onFocus='runOnFocus()' ></textarea>
    </div>

JS:

function runOnFocus(){
if (window.device.platform == "Android" && window.device.version =="4.0.3")
//I had to set a timeout here or this would trigger before the TextView was created. 1ms seems to be enough though.
window.setTimeout(function(){
        window.AndroidLayer.setBackground();},1);        
}

Java:

private String TAG = "TextArea";
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/index.html");
        appView.addJavascriptInterface(this, "AndroidLayer");                       
    }

public void setBackground(){
    runOnUiThread( new Runnable() {         
        @Override
        public void run() {
            Log.d("native","gotFocus");
            View tv = (View) appView.getFocusedChild();     
            if (tv == null)
                Log.d("native","isNull");
            else
                tv.setBackgroundColor(Color.TRANSPARENT);               
        }
    });

}

Таким образом, мы можем контролировать, какие элементы на странице будут вызывать изменение фона. Я не мог найти никаких нежелательных побочных эффектов для этого, но у меня не было времени проверить его во всех версиях, поэтому я решил ограничить его до версии 4.0.3, единственной версией, которую я смог узнать с этой проблемой.

Ответ 2

Android привязывает исходное текстовое поле поверх текстового поля, когда оно сфокусировано. Это код, который вы не можете остановить, и он встроен в веб-просмотр.

Вы можете обойти это, установив видимость исходного текста на View.GONE. Если вам нужна дополнительная информация о том, как это сделать, дайте мне знать!

Изменить: я только что проверил исходный код для Jellybean, и это поведение, похоже, изменилось. На Jellybean нет собственного наложения WebTextView! Возможно, планшет, на котором вы видели свой фон, был планшетом Jellybean. Во всяком случае, то, что я сказал, все еще применяется к ICS и ниже.