项目要求：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. Perl初识笔记

    前两天项目中遇到了一个Perl脚本程序,需要读懂该程序,由于以前重来没有用过Perl语言,所以没法搞定.今天抽空把该语言的基础看了一遍,基本上内读懂Perl脚本程序了吧.真是如网上很多分享的经验所说, ...

  2. URAL 2070 Interesting Numbers (找规律)

    题意:在[L, R]之间求:x是个素数,因子个数是素数,同时满足两个条件,或者同时不满足两个条件的数的个数. 析:很明显所有的素数,因数都是2,是素数,所以我们只要算不是素数但因子是素数的数目就好,然 ...

  3. spring+jpg环境下，spring实现文件下载web实现通用的文件下载方法

    jar包复制到WEB-INF 文件夹lib下: commons-io-1.3.2.jar public static String download(HttpServletRequest reques ...

  4. My集合框架第三弹 AVL树

    旋转操作: 由于任意一个结点最多只有两个儿子,所以当高度不平衡时,只可能是以下四种情况造成的: 1. 对该结点的左儿子的左子树进行了一次插入. 2. 对该结点的左儿子的右子树进行了一次插入. 3. 对 ...

  5. Java安装程序制作

    对于Java桌面应用来说,比较烦琐的就是安装部署问题,如:客户端是否安装有jre.jre版本.jre在哪里下载.如何用jre启动 Java应用等等.不要说刚接触电脑的人,就算是比较熟悉电脑,如果没有接 ...

  6. jquery获取kindEditor值

    KE.show({            id: 'txtMessage',            imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...

  7. chrome内核浏览器缓存资源找回方法

    曾几何时,用chrome浏览器看了某个图片,网页,视频等,当时没保存,后来再怎么找都找不到了,chrome还把缓存加密了,不能像ie那样找回,这世上有买后悔药的吗?还真有! 搜索chromeCache ...

  8. T4模板语法

    T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit. T4文本模板,即一种自定义规则的代码生成器.根据业务模型可生成任何形式的文本文件或供程序调 ...

  9. Java虚拟机的启动与程序的执行

    这篇文章是从 OpenJDK 源码的角度讲当我们执行了 java -classpath . hello 之后,java.exe 怎样从 main 函数開始运行,启动虚拟机,并运行字节码中的代码. 实验 ...

  10. defer和async的区别

    先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...