[Phonegap+Sencha Touch] 移动开发22、安卓4.0.X的webview或自带浏览器中，去除输入框外面的蓝色边框

这个css的方法去除边框有副作用，还是废弃掉吧。需要的请看最下面的办法。

安卓4.0.X中，有焦点的输入框是这样的，



蓝色边框好丑，去除的办法是，加上下面的css：

a:focus,input:focus,textarea:focus {

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-user-modify: read-write-plaintext-only;

}

下面是去除后的效果：



上面的css办法有副作用，导致输入法不再能够输入多个字符，比如用中文输入法打“我们”，进入文本框的就只有“我”。本来是google到的解决办法，但是国外大部分使用字母的国家是无所谓，咱们用中文就不能忍受了。

另一个办法：

打开你phonegap项目中的文件

\platforms\android\CordovaLib\src\org\apache\cordova\CordovaActivity.java

文件开头引入这几个包

import android.view.ViewGroup.OnHierarchyChangeListener;
import android.view.inputmethod.InputMethodManager;
import android.widget.AutoCompleteTextView;
import android.text.InputType;
import android.os.Build;

修改311行的public void init() 方法，加上下面的代码

public void init() {
    CordovaWebView webView = makeWebView();
    //modify start
    if (Build.VERSION.SDK_INT == Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {//4.0.3
    	webView.setOnHierarchyChangeListener(new OnHierarchyChangeListener() {

			@Override
			public void onChildViewRemoved(View parent, View child) {}

			@Override
			public void onChildViewAdded(View parent, View child) {
				final AutoCompleteTextView myWebTextView;
				if( child.getClass().getName().equals("android.webkit.WebTextView")){

					myWebTextView =(AutoCompleteTextView) child;

					myWebTextView.getHandler().post(new Runnable() {
						@Override
						public void run() {
							myWebTextView.setBackgroundColor(Color.TRANSPARENT);
							//myWebTextView.setCursorVisible(false);
							myWebTextView.setTextColor(Color.TRANSPARENT);

							//set lines to 0 because sethighlightcolor does not work
							myWebTextView.setLines(0);

							myWebTextView.setInputType(InputType.TYPE_NULL);
							myWebTextView.setFocusable(true);
							myWebTextView.setFocusableInTouchMode(true);

							if(myWebTextView.hasFocus())
								myWebTextView.clearFocus();

							//sometimes the keyboard doesn't show up by just requestFocus,so i have to force it by showSoftInput
							InputMethodManager mgr = (InputMethodManager) CordovaActivity.this.getSystemService(Context.INPUT_METHOD_SERVICE);
							myWebTextView.requestFocus();
							mgr.showSoftInput(myWebTextView, InputMethodManager.SHOW_FORCED);
						}
					});
				}
			}
		});
    }
    //<span style="font-family: Arial, Helvetica, sans-serif;">modify end</span>
    this.init(webView, makeWebViewClient(webView), makeChromeClient(webView));
}

效果就是这样的



光标会有2个，看起来有重影的样子，不过还是可以接受的。

一劳永逸的话。你可以改下面这个文件

C:\Users\用户名\.cordova\lib\android\cordova\3.4.0\framework\src\org\apache\cordova\CordovaActivity.java

这样，以后创建的phonegap项目都会有这段代码了

欢迎加入Sencha Touch + Phonegap 群：194182999

共同学习交流（博主QQ：479858761）