Jump to content
Sign in to follow this  
igors233

Selectable text

Recommended Posts

By default all text in SMS application isn't selectable (aside from edit and memo controls) nor it works when contentEditable atribute is set.

Can someone advise on how to fix it and have it working? Yes I know that SMS intended target is mobile platform where that doesn't work but I do work for regular browsers (desktop) and I need this feature.

Share this post


Link to post
Share on other sites

1) The standard css files lists 'user-select:none' as default for all html-elements, with an override for memo and editbox which get the vale 'auto'

2) See this post (https://jonlennartaasenden.wordpress.com/2014/06/14/creating-an-edit-box-in-smart-pascal/) which explains the use of the 'contenteditable' attribute

 

Best I can come up with is a combination of the two (user-select and contenteditable).

Works for all types of html elements in Chrome and FF, didn't check Safari, does not work in Edge

unit Form1;
 
interface
 
uses
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms,
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Controls.Label,
  SmartCL.Controls.EditBox;
 
type
  TMyLabel = class(TW3Label)
  protected
    procedure StyleTagObject; override;
  end;
 
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure FormActivated; override;
    procedure Resize; override;
    MyLabel1 : TMyLabel;
  end;
 
implementation
 
{ TForm1 }
 
procedure TMyLabel.StyleTagObject;
Begin
  inherited;
//  w3_setAttrib(handle,'type','text');
//  w3_setAttrib(handle,'contenteditable',True);
//  w3_setStyle(handle,'user-select','auto');
  w3_setStyle(handle,'-webkit-user-select','auto');
end;
 
procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  MyLabel1 := TMyLabel.Create(self);
  MyLabel1.InnerHTML := 'ddddd';
  MyLabel1.OnClick := procedure(Sender: TObject)
  begin
   asm
    function selectElementContents(el) {
      var range = document.createRange();
      range.selectNodeContents(el);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }
 
    var el = document.getElementById("OBJ4");    // <=== demo
    selectElementContents(el);
   end;
  end;
end;
 
procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
end;
 
procedure TForm1.FormActivated;
begin
  inherited;
  ReSize;
end;
 
procedure TForm1.Resize;
begin
  inherited;
  If assigned(MyLabel1) then
    MyLabel1.SetBounds(20,20,100,30);
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×