Load image/logo in existing HTML input field - UIWebView

问题

as I'm new to programming I've done something like this :

- (void)completeUserFieldsForWebView:(UIWebView *)webView withUsername:(NSString *)username {

// TextField Which has Value "email"
NSString *loadUsernameJS =
[NSString stringWithFormat:@"var inputFields = document.querySelectorAll(\"input[type='email']\"); \
 for (var i = inputFields.length >>> 0; i--;) { inputFields[i].value = '%@';}", username];

// TextField Which has Value "Text" if email is not found
NSString *loadText =
[NSString stringWithFormat:@"var inputFields = document.querySelectorAll(\"input[type='text']\"); \
 for (var i = inputFields.length >>> 0; i--;) { inputFields[i].value = '%@';}", username];
[webView stringByEvaluatingJavaScriptFromString: loadUsernameJS];
[webView stringByEvaluatingJavaScriptFromString: loadText];
}

Which fill all the text fields according to my input . . .

- (void)completePasswordFieldsForWebView:(UIWebView *)webView withPassword:(NSString *)password {

NSString *loadPasswordJS =
[NSString stringWithFormat:@"var passFields = document.querySelectorAll(\"input[type='password']\"); \
 for (var i = passFields.length>>> 0; i--;) { passFields[i].value ='%@';}", password];
[webView stringByEvaluatingJavaScriptFromString: loadPasswordJS];
}

which fills Password parameter in the certain HTML page in the UIWebView . . .

The question is how can I inject my own images in particular textbox ?

Try No. 1 :

  [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
         "script.type = 'text/javascript';"
         "script.text = \"function myFunction() { "
         "var field = document.getElementById('txtAdminPwd');"
         "field.style.backgroundImage='url(icon1.png)';"
         "}\";"
         "document.getElementsByTagName('head')[0].appendChild(script);"];

        [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

Not getting Success . . .

Try No. 2(@arun's):

 NSString *cssString = @".login-text-box-bg1{  background-image:url(myProjectName/Arun.png); background-position: right top; background-repeat: no-repeat; background-size: contain; }"; // 1
         NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2
        NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3
        [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4

local image is outside on my project . . .

Sir, Thanks for the effort but it's Still not solving the Universal Approach. . .

New Test : i can get id or class name via [inputNode getAttributeNamed:@"id"] [method]2

Now, what if I do something like this

 [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
         "script.type = 'text/javascript';"
         "script.text = \"function myFunction() { "
         "var field = document.getElementById('%@');"
         "field.style.backgroundImage = 'url('icon1.png')';"

         "}\";"
         "document.getElementsByTagName('head')[0].appendChild(script);",[inputNode getAttributeNamed:@"id"]];

        [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

but it's throwing an error can't we pass an argument ?? leave:\

My Actual motto is showing local image into every input tag (Universal)

Done:

 NSString *strJSInjection = [NSString stringWithFormat:@".%@{  background-image:url(https://s29.postimg.org/qqxoigjbr/Arun_Photo.png); background-position: right top; background-repeat: no-repeat; background-size: contain; }",[inputNode getAttributeNamed:@"class"]];

        NSString *cssString = strJSInjection; // 1
         NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2
        NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3
        [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4

回答1:

<input type="text" class="textBox" />

Lets assume above is your HTML textfield then apply CSS to this to insert image just try below code,

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *cssString = @".textBox{  background-image:url(https://s29.postimg.org/qqxoigjbr/Arun_Photo.png); background-position: right top; background-repeat: no-repeat; background-size: contain; }"; // 1
    NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2
    NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4
}

For Local Image file you can try out the below code snippet,

NSString *url = [[NSBundle mainBundle] pathForResource:@"image" ofType:@"png"];
NSString *cssString =  [NSString stringWithFormat:@".textBox{  background-image:url(%@); background-position: right top; background-repeat: no-repeat; background-size: contain; }",url]; // 1

来源：https://stackoverflow.com/questions/42382817/load-image-logo-in-existing-html-input-field-uiwebview

标签

html

ios

objective-c

uiwebview