项目要求：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. Scrum Planning Card

    最近用Swift写了个小工具Scrum Planning Card,如果你也用scrum管理项目, 或许用这个工具可以提高你的工作效率. 另外欢迎提建议和反馈,谢谢. 欢迎关注我的微信公众号 Hope ...

  2. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  3. insertAfter()

    <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript window.on ...

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

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

  5. 容器的end()方法

    容器的end()方法,返回一个迭代器,需要注意:这个迭代器不指向实际的元素,而是表示末端元素的下一个元素,这个迭代器起一个哨兵的作用,表示已经处理完所有的元素. 因此,在查找的时候,返回的迭代器,不等 ...

  6. 从零开始学android开发-获取控件

    mBtnNews = (Button)findViewById(R.id.btn_news);//获取控件

  7. Codeforces Round #338 (Div. 2) E. Hexagons 讨论讨论

    E. Hexagons 题目连接: http://codeforces.com/contest/615/problem/E Description Ayrat is looking for the p ...

  8. HTML 转义符

    特殊字符 字符 十进制 转义字符 “ " " & & & < < < > > > 不断开空格(non-breaking ...

  9. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  10. 【JavaScript】停不下来的前端，自动化流程

    http://kb.cnblogs.com/page/501270/ 流程 关于流程,是从项目启动到发布的过程.在前端通常我们都做些什么? 切图,即从设计稿中获取需要的素材,并不是所有前端开发都被要求 ...