20 replies to this topic

[davidbrook]

hi,

I found this website. How to prevent a TWebBrowser from displaying a document's background. And I am using part of the code. I seem to understand most of the code, but I don't understand why I can't use this code for changing the color of an input field on a webbrowser in delphi. It should work the same way, although that is what I suspected.

Please if someone can help me out on this. I am trying to make an input field on any accessed webpage a color light blue and the border a darker blue color.

Thank you in advanced!

[Zorfox]

I modified some code from a website I found a while ago. It explains how to change values of fields. I will try and post the URL after this. The last time it took a week to actually post. I didn't think you wanted to wait that long :loading:.

I used the same function from there to get the form number. I wrote another function to change the style attributes of the field in the form. Of course you will need to iterate through all the field names for all of the forms. But this is an example of how you could do it.

To get the form as an IHTMLFormElement by number try the code below...(There can be more than one form per page)

function GetFormByNumber(document: IHTMLDocument2;

    formNumber: integer): IHTMLFormElement;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  if formNumber < forms.Length then

    result := forms.Item(formNumber,'') as IHTMLFormElement

  else

    result := nil;

end;

To set the backgroundColor, borderColor and border size try the code below...

procedure SetFieldAttrib(theForm: IHTMLFormElement;

  const fieldName: string; const bgColor: string;

  const instance: integer=0);

var

  field: IHTMLElement;

begin

  field := theForm.Item(fieldName,instance) as IHTMLElement;

  if Assigned(field) then

  begin

   field.style.backgroundcolor :=  bgColor;

   field.style.bordercolor :=  '#000080';

   field.style.borderwidth :=  '3';

 end;

end;

To call the SetFieldAttrib function try the code below...

var

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := WebBrowser.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser.Document as IHTMLDocument2,0);

  SetFieldAttrib(theForm,'Edit1','#00CCFF');

end;

[Zorfox]

Thisis the link to the page of functions you may find useful.

[LuthfiHakim]

I have no direct knowledge or experience in changing "styles" of elements in TWebBrowser (or IE), so I can not contribute anything new. But from the tutorial I see that the solution is pretty straight forward. Perhaps you just haven't found the correct interface. Start research from this msdn page for details of known interfaces for the elements.

Personally I don't like us changing styles that's been "painfully" created by some webmasters. :) If it's your own page, then you just add or customize your css to adjust the styles. Much easier, i think.

[davidbrook]

Thanks to the both of you. The code you provided works perfectly, Zorfox.

I am having a little trouble at the moment though with the changing back of the color. To white for example, this is the code I have:

  document := webbrowser1.Document as IHTMLDocument2;

  theForm := GetFormByNumber(webbrowser1.Document as IHTMLDocument2,0);

  if event.srcElement.tagName='INPUT' then begin

    id:=Event.srcElement.id;

    SetFieldAttrib(theForm,id,'#FF0000');

   end;

   if event.srcElement.tagName<>'INPUT' then

     SetFieldAttrib(theForm,id,'#FFFFFF')

This does not seem to work. I want it to light up when I am on it with the mouse and when I move off it, it goes back to white.

Can you help me with this?

[davidbrook]

I figured it out, you can do it with a timer

[Zorfox]

You may want to look into "events sinking" for this application. I'm not a big fan of using timers for executing functions when another less "resource hungry" method exists. An execllent example can be found here.

[davidbrook]

It seems to work fine, but it has the similar problem with the timer. When you move over the fields, it sometimes leaves one with the color filled. I guess its not quick enough to respond.

I wrote the code, so that when the tagname is input it colors when it is not it clears it.

is this the best way to do so?

[Zorfox]

Certainly you should evaluate if the field is an input. So yes that is a good method imo. The response time issue may be resolved by using events sinking. The WebBrowser does not expose mouse events for the document. Since this is essentially what your looking for, OnMouseOver, I would look into it. It may seem complex at first but essentially it is pretty straightforward. That way you will not have to wait for a timer event to fire.

[davidbrook]

Could you explain to me what events sinking is and how it would resolve my problem. I am not using the timer anymore since i realized the event firing might have been to slow. Now I am using the onmouseover method from that website link you posted. Still the issue seems the same. When moving the mouse fast from one input field to another, it often leaves the first input field colored in. Is it possible to resolve this?

[Zorfox]

Sorry, I was under the impression you were still using the timer. The problem seems to be in your method of modifying the document. Since that example does not modify the document there is no traces left when the mouse exits the area. When your mouse is over the input field I assume you are changing the color but how are you restoring it when the mouse exits the area? Basically the application should store the original styles of the fields before modifications. This way when the mouse is not over an input field the fields could be evaluated to assure they are all in their original styles if not restore them. This should resolve the issue you seem to be having. Does that sound reasonable to you?

[Zorfox]

I decided to try out what you have been saying for myself. What I did was add the code to create an OnMouseover event as you have, the GetFormByNumber and SetFieldAttrib functions as well. I added a global variable fName of type string. Add the foillowing code for the Document_OnMouseOver event.

procedure TForm1.Document_OnMouseOver;

var

  element : IHTMLElement;

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := WebBrowser1.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser1.Document as IHTMLDocument2,0);

  if htmlDoc = nil then Exit;

  element := htmlDoc.parentWindow.event.srcElement;


   if LowerCase(element.tagName) = 'input' then

     begin

       fName := element.getAttribute('name',0);

       SetFieldAttrib(theForm, fName ,'#000FFF', '#000000', '3');

     end else


  if LowerCase(element.tagName) <> 'input' then

    begin

      SetFieldAttrib(theForm,fname ,'', '', '');

    end;


end;  (*Document_OnMouseOver*)

This seems to work without any re-color problems. It is basically coloring the field if it is an input and resetting the style values to default if the mouse is not over an input. I would reccomend to add the original styles for the input field you modify into a few global variables like the fName. That way you will have the correct values for resetting them if the originals were not default colors etc.