项目要求：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. EasyUI_tree根据数据库数据生成树形结构JSON格式

    @Entitypublic class PubComp { @Id private String aguid; // 菜单ID private String pguid; // 父菜单 private ...

  2. Servlet容器的启动过程

    [http://book.51cto.com/art/201408/448854.htm]   Tomcat的启动逻辑是基于观察者模式设计的,所有的容器都会继承Lifecycle接口,它管理着容器的整 ...

  3. PL SQL笔记(三)

    loop then .. exit; end if; end loop; select to_char(sysdate, 'YYYY-MM-DD HH24:MI:SS') from dual; sel ...

  4. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...

  5. Introduction into ISO 27145 WWH-OBD

    全球统一的重型发动机的车载诊断系统(WWH-OBD) ISO/PAS 27145 is intended to become the single communication standard for ...

  6. MySQL数据库能够用随意ip连接訪问的方法

    通过CMD命令行改动数据库表的一个字段的值.实现连接,訪问. 第一步.找到MYSQL软件安装所在的bin文件夹. (1)cd\当前文件夹 (2)指定MYSQL安装的bin文件夹 (3)输入 -h lo ...

  7. 【M5】对定制的“类型转换函数”保持警觉

    1.隐式类型转换有两种情况:单个形参构造方法和隐式类型转换操作符.注意:隐式类型转换不是把A类型的对象a,转化为B类型的对象b,而是使用a对象构造出一个b对象,a对象并没有变化. 2.单个形参构造方法 ...

  8. shared_ptr注意事项

    对shared_ptr的Copy构造和Copy赋值,会改变引用计数,但是对shared_ptr中原始资源的Copy构造和Copy赋值,不会改变引用计数.因此存在下面的危险情况: 1.获取资源时,初始化 ...

  9. centos7.2安装配置

    VMware12上安装Centos7,如果电脑是64位,这必须选择64位的centos系统,不然安装完会找不到网卡.安装过程中应当开启网卡选项. 安装完想用ifconfig命令查找IP地址会提示错误: ...

  10. PhoneGap+jQuery Mobile+Rest 访问远程数据

    最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...