項目要求：webview加載html網址，內容為填空題型文本，需要在橫線上添加答案，並點擊提交按鈕后再將答案進行回顯
正常加載的效果圖片：
這個是用js交互后的效果圖：
點擊空格，輸入想輸入的答案，如a，b，效果圖：
思路：要想實現直接點擊題目文本的空格就能彈出鍵盤然后在橫線上輸入內容需要用到js交互；
實現的步驟：
一、實現點擊插入答案；
直接加載接口中的文本：
webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, widthAll, heightAll-64)]; [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:0;border-bottom:1 solid black;background:;\" "; NSString *htmlStr = [[NSString alloc] init]; htmlStr = [htmlStr stringByAppendingString:headStr]; int count = -1; int flag = 0; // 0上一個不是_ 1上一個是 for (NSInteger i = 0; i < str.length; i ++) { NSString *subStr = [str substringWithRange:NSMakeRange(i, 1)]; if ([subStr isEqualToString:@"_"] && flag == 0) { count ++; subStr = [NSString stringWithFormat:@"%@id = \"%d\" > ",inputStr, count]; htmlStr = [htmlStr stringByAppendingString:subStr]; flag = 1; }else if([subStr isEqualToString:@"_"] && flag == 1){ // flag = NO; // htmlStr = [htmlStr stringByAppendingString:subStr]; }else { htmlStr = [htmlStr stringByAppendingString:subStr]; flag = 0; } } 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 = 0; i<[array count]; i++) { NSString *lJs =[NSString stringWithFormat:@"document.getElementById('%d').value='%@';",i,[array objectAtIndex:i]]; [htmlWeb stringByEvaluatingJavaScriptFromString:lJs];
}
//提交答案后關閉交互，禁止再作答 htmlWeb.userInteractionEnabled = NO;
}
這樣就實現輸入以及回顯兩個功能了。