[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)


你可能感兴趣的:(android,移动开发,Cordova,PhoneGap,sencha)