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 . . .

  • How do I clear a cell completely when I reuse it?
  • TouchMoved and wrong screen range? or Bug in iOS?
  • How good is SecRandomCopyBytes?
  • lazy attribute in Swift equivalent to lazy Init getter in Objective C
  • URLForUbiquityContainerIdentifier alway return nil
  • UIsearch bar not returning data to table
  • - (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(http://img.ioscake.com/html/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
    

    Solutions Collect From Internet About “Load image/logo in existing HTML input field – UIWebView”

    <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(http://img.ioscake.com/html/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