Swift IOS capture html form input in realtime jquery

Question

I'm trying to capture a text input in a html form in real time in my webview. I'm currently using jquery to capture the text input change and then forward the value through a url that I intercept. I am able to capture each change in the text input but the issue I'm having is my text input loses focus on every new character entered, I have to reclick the text input to continue entering each time (window.location.href causes it to lose focus every time its triggered). Im using the following code:

var form = "
<form class="search_extended">
<input style="" type="text" name="name" id="search_field">
<input type='hidden' name='page' value='name_search'>
</form>"

var script = "
<script type="text/javascript">
$(document).ready(function() { 
$("form input, form textarea").on("input propertychange change", function() {
var search_serialized = $(".search_extended").serialize();
window.location.href = "?" + search_serialized; 
});});</script>"

script = script + "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>"

self.webView_Search_Extended.loadHTMLString(form + script, baseURL: nil)

Capture forwarding URL

   func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    print(request.url?.absoluteString)
    var url = request.url?.absoluteString
return true
}

George Green · Accepted Answer · 2017-03-08 14:40:36Z

1

I believe your issue is that by using

window.location.href = "?" + search_serialized;

to call the url that your delegate catches, caused the text field to blur.

You will probably want to use a special link in your webpage that can be caught (so it doesn't catch all loads) and return false from the delegate for this:

var form = "
<form class="search_extended">
<input style="" type="text" name="name" id="search_field">
<input type='hidden' name='page' value='name_search'>
</form>"

var script = "
<script type="text/javascript">
$(document).ready(function() { 
$("form input, form textarea").on("input propertychange change", function() {
var search_serialized = $(".search_extended").serialize();
window.location.href = "my-form-scheme://" + search_serialized;
});});</script>"

script = script + "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>"

self.webView_Search_Extended.loadHTMLString(form + script, baseURL: nil)

And then for the delegate:

func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    if request.url?.scheme == "my-form-scheme" {
        print(request.url?.absoluteString)
        var url = request.url?.absoluteString
        return false // this is the important bit
    }
    return true
}

So you make sure that you only catch the special url posted by your form event, and return false, which will hopefully prevent the blur.

answered Mar 8, 2017 at 14:40

George Green

4,9335 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2423476 Over a year ago

You are a life savor! Do you know the reason behind using a custom scheme why it doesn't cause the blur? I'm kinda stumped on why it works this way.

George Green Over a year ago

@user2423476 It's not actually the custom scheme here that does this, the custom scheme just makes it easy to catch the specific call (I wasn't sure if perhaps you would have other calls from the webview too, plus it makes the answer more applicable to any other users who may come across it). The bit making the different is return false, inside that conditional. When you return true you are telling the webview that it is ok to load the request, which in this case is reloading the page, which in turn blurs all inputs on the page. Returning false lets you catch the data, but not do a reload.

Collectives™ on Stack Overflow

Swift IOS capture html form input in realtime jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related