最近一项目有个需求:需要实现类似Word那样的编辑界面,所以就直接用富文本实现了。
这样一般的富文本实现编辑没啥难度,保存起来也容易,担后来有个单选框,但是勾选了单选框后,保存后的设置不生效,比如勾选了“是”保存后,再次打开没生效,errrrrrrrrrrrr...
这样不生效也不难理解,因为勾选了选项,最终没有在富文本里生效,然后前前后后找了超多资料,花了好几天,终于搞定监听勾选框后生效的方法。。。。
首先还是直接使用Webview加载需要的富文本,然后在插入的单选框里添加一个事件:οnchange="radioFunc()"
radioFunc()是自定义命名的,富文本这样:
<div id="pathType" onchange="radioFunc()">
<input type="radio" name="userrole" value="管理员" id="aaa">管理员
<input type="radio" name="userrole" value="用户" id="bbb">用户
</div>
接着在一个自定义的js文件里输入该自定义函数的方法体(这份js文件我就随手命名为abc.js吧):
radioFunc = function(){
var chkObjs=document.getElementsByName("userrole");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
document.getElementById(chkObjs[i].id).setAttribute("checked","checked");
} else{
document.getElementById(chkObjs[i].id).removeAttribute("checked");
}
}
}
最后,需要在这个Webview引用的html里加如下代码段使其生效:
<script type="text/javascript" src="/sdcard/Mobile court/data/abc.js"></script>
因为考虑到后期动态更新的问题,所以我这份文件直接放在SD卡的一个路径上了
下拉框实现也差不多,最后贴上一个下拉框的实现方法
第一步也是需要输入下拉框对应的富文本:
爱好:
<select id="nations" onchange="func()">
<option value="排球">排球</option>
<option value="高尔夫球">高尔夫球</option>
<option value="篮球">篮球</option>
<option value="乒乓球">乒乓球</option>
<option value="足球">足球</option>
<option value="跑步">跑步</option>
<option value="阅读">阅读</option>
<option value="听音乐">听音乐</option>
<option value="玩游戏">玩游戏</option>
<option value="发呆" selected="true">发呆</option>
<option value="编程">编程</option>
<option value="写小说">写小说</option>
<option value="其他">其他</option>
第二步,在js里添加监听事件
func = function(){
var nation=document.getElementById("nations");
var ops=nation.options;
for (var i = 0; i < ops.length; i++) {
if (ops[i].selected){
ops[i].setAttribute("selected","true");
} else{
ops[i].removeAttribute("selected");
}
}
}
这样操作,就不用在Android里做任何的处理了~