项目要求：webview加载html网址，内容为填空题型文本，需要在横线上添加答案，并点击提交按钮后再将答案进行回显

正常加载的效果图片：

这个是用js交互后的效果图：

点击空格，输入想输入的答案，如a，b，效果图：

思路：要想实现直接点击题目文本的空格就能弹出键盘然后在横线上输入内容需要用到js交互；

实现的步骤：

一、实现点击插入答案；

直接加载接口中的文本：

webView = [[UIWebView alloc]initWithFrame:CGRectMake(, , widthAll, heightAll-)];

[self.view addSubview:webView];

NSString *textStr = @"每周末我都和妈妈出去吃饭?<BR>I ____  ____  for a meal with my mother every weekend?<BR>";
NSString *htmlStr =[self getHtmlString:textStr showStr:@""];

[webView loadHTMLString:htmlStr baseURL:nil];

其中，字符串中的的<BR>是换行符，webview加载时会自动识别并换行，补充：如果是用testview控件加载，则不会识别，所以还要提前用字符串替换的方法将<BR>替换成\n，空格符等也一样。

用js方法转换文本方法：

// 替换NSString为htmlString

-(NSString *)getHtmlString:(NSString *)str showStr:(NSString *)showStr

{

    NSString *headStr = @"<html><head></head><body>";

    NSString *footerStr = @"</body></html>";

    NSString *inputStr = @"<input style=\"border-radius:0px;border:;border-bottom: solid black;background:;\" ";

    NSString *htmlStr = [[NSString alloc] init];

    htmlStr = [htmlStr stringByAppendingString:headStr];

    int count = -;

    int flag = ; // 0上一个不是_ 1上一个是

    for (NSInteger i = ; i < str.length; i ++) {

        NSString *subStr = [str substringWithRange:NSMakeRange(i, )];

        if ([subStr isEqualToString:@"_"] && flag == ) {

            count ++;

            subStr = [NSString stringWithFormat:@"%@id = \"%d\" > ",inputStr, count];

            htmlStr = [htmlStr stringByAppendingString:subStr];

            flag = ;

        }else if([subStr isEqualToString:@"_"] && flag == ){

            //            flag = NO;

            //            htmlStr = [htmlStr stringByAppendingString:subStr];

        }else {

            htmlStr = [htmlStr stringByAppendingString:subStr];

            flag = ;

        }

    }

    NSString *jsStr = [NSString stringWithFormat:@"<script language=\"javascript\">  function transferData(){ var index = 0;var inputDatas = new Array();while(index<= %d ){var inputData = document.getElementById(index);inputDatas[index]=inputData.value;index++}; return JSON.stringify(inputDatas);}</script>", count];

    htmlStr = [htmlStr stringByAppendingString:jsStr];

    htmlStr = [htmlStr stringByAppendingString:footerStr];

    return htmlStr;

}

当点击空格输入文字后，通过

 answerStr = [webview stringByEvaluatingJavaScriptFromString:@"transferData();"];//获取输入的答案

方法获取输入的答案，结构是json数组串，转换一下可以用一个全局的数组进行保存。

// 将JSON串转化为字典或者数组

- (NSArray *)stringToArray:(NSString *)jsonString{

    NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];

    NSError *error = nil;

    NSArray *arr = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:&error];

    if (arr != nil || error == nil){

        return arr;

    }else{

        // 解析错误

        return nil;

    }

}

二、实现提交后的答案回显（即提交作答答案后显示答案）；

添加webview的代理<UIWebViewDelegate>，在代理方法中将之前数组的值分别赋值到空格中：

#pragma mark-填空题

-(void)webViewDidFinishLoad:(UIWebView *)web

{

//    NSLog(@"webview代理方法---");

        NSLog(@"webview代理方法---打印保存值的全局数组array：%@",array);

        for (int i = ; i<[array count]; i++) {

            NSString *lJs =[NSString stringWithFormat:@"document.getElementById('%d').value='%@';",i,[array objectAtIndex:i]];

            [htmlWeb stringByEvaluatingJavaScriptFromString:lJs];

    }
 //提交答案后关闭交互，禁止再作答

     htmlWeb.userInteractionEnabled = NO;
}

这样就实现输入以及回显两个功能了。

iOS webView与js交互在文本空格上输入文字的更多相关文章

  1. andriod/ios webview与js交互 html_demo

    <html> <head> <title>测试</title> </head> <body> <h3>Android ...

  2. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  3. js正则表达式限制文本框只能输入数字,小数点,英文字母

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  4. JS 正则表达式 控制文本框只能输入中文、英文、数字与指定特殊符号

    JS 正则表达式 控制文本框只能输入中文.英文.数字与指定特殊符号(屏蔽表情输入) onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件 只能输入中文: ...

  5. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  6. webview与js交互

     对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...

  7. iOS webview注入JS

    - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...

  8. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  9. iOS之与JS交互通信

    随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一.UIWebview && iframe && ...

随机推荐

  1. 编译ffmpeg（iOS）

    一,x264库的编译 首先到http://www.videolan.org/developers/x264.html下载x264的库,然后解压,修改文件夹名称为x264     二,下载ffmpeg2 ...

  2. 结构类模式（七）：代理（Proxy）

    定义 为其他对象提供一种代理以控制对这个对象的访问. 代理模式也叫做委托模式,它是一项基本设计技巧.许多其他的模式,如状态模式.策略模式.访问者模式本质上是在更特殊的场合采用了委托模式,而且在日常的应 ...

  3. xiaocms 关于搜索功能 添加搜索字段

    自己折磨了好几天 就是没研究个出像样的的东西 看了一下 core/controller/index.php searchAction()方法 但是不知从何下手.查了sql语句,还是没实现 请教了一位自 ...

  4. jquery操作复选框(checkbox)

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...

  5. Visual Studio无法添加断点

    今天在写代码的时候突然发现无法添加断点,更加详细的场景是“按F9可以添加调试行,但是断点不显示,且显示代码行数左边的灰色区域不见了”找了各种方法也没有解决,然后重启.修复甚至重装都不行,最后在万千网页 ...

  6. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  7. 编写一个JavaScript函数 parseQueryString，把URL参数解析为一个对象

    var url="http://www.taobao.com/index.php?key0=0&key1=1&key2=2"; function parseQuer ...

  8. hdu 5272 Dylans loves numbers 水题

    Dylans loves numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem. ...

  9. Android如何完全调试framework层代码

    1 之前写过一篇文章:<Android实现开机调试system_process> 2 google的eclipse插件ADT的已经能够很方便的调试Android的apk了,但是调试的时候应 ...

  10. HTML之一 符号实体

    符号实体和”语言代码“以及”字符集“无关.