项目要求：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. LRESULT与wParam和lParam的问题

    在微软vc提供的头文件中有定义在winnt.h中typedef long LONG;在windef.h中typedef LONG LRESULT; 所以LRESULT就是long,也就是长整形之所以取 ...

  2. SQL Script 杂记

    1.提交sql server中未提交的事务 commit select   @@TRANCOUNT 2.查询存储过程中包含某个字符串的所有存储过程 SELECT *FROM   INFORMATION ...

  3. [网络]远程访问局域网svn服务器[转]

    转至:http://8474832.blog.51cto.com/8464832/1555449 打开路由器访问界面 选择转发规则->端口映射-新建 在弹出的界面中填写相应的端口号了内网ip 填 ...

  4. 【OpenGL】glFinish()和glFlush()函数详解-[转]

    通常情况下,OpenGL指令不是立即执行的.它们首先被送到指令缓冲区,然后才被送到硬件执行.glFinish和glFlush都是强制将命令缓冲区的内容提交给硬件执行. 一.glFinish()函数   ...

  5. jquery提示信息 tips

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. js 原型的内存分析

    使用构造器的弊端:http://www.cnblogs.com/a757956132/p/5258897.html 示例 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候, 这个函数就可 ...

  7. lvs-dr模式原理详解和可能存在的“假负载均衡”

    原文地址: http://blog.csdn.net/lengzijian/article/details/8089661 lvs-dr模式原理 转载注明出处:http://blog.csdn.net ...

  8. Windows Message Codes

    https://www.autoitscript.com/autoit3/docs/appendix/WinMsgCodes.htm WM_ACTIVATE 0x0006 WM_ACTIVATEAPP ...

  9. SCCM2007

    Active Directory系统组发现:此方法按照上次运行发现方法时 Active Directory 中的响应返回对象,可发现活动目录OU.全局组.通用组.嵌套组.非安全组. Active Di ...

  10. Sqlite表的结构修改

    Sqlite删除列方法 http://blog.csdn.net/aben_2005/article/details/6563538 SQLite3 table 结构修改 http://blog.cs ...