Jump to content

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.

Link to post
Share on other sites
  • Moderators

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.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...