Can’t copy text from webpage?

Sometimes I come upon a website that I cannot copy text from a HTML web page. Simply cannot click and highlight the lines I try to select for copying. I thought that my browser/mouse was not working. But I go to other sites, I am able to highlight/copy normally. They must’ve done something on that page probably to prevent content from being lifted of the page easily?

Why is this and how do they do it? Is this a javascript in the page that prevents me from copying?

ANSWER

Could be a script on the webpage. I’m certain that can be done or already been done through Javascript before.

I know that the same effect can be achieved via CSS alone. It is easier, cleaner and does not add to another Javascript messing up or slowing down a site. I prefer this method over the other.

Below are the CSS lines that does what you want. Different ones for different browsers. It is vendor specific for some, but does the same exact thing.

   user-select: none; /* Supported by Chrome, Firefox & Opera */
  -moz-user-select: none; /* Firefox (older) */
  -ms-user-select: none; /* Edge */
  -khtml-user-select: none; /* Konqueror */
  -webkit-touch-callout: none; /* Safari for iOS */
  -webkit-user-select: none; /* Safari for Mac */

Try it out. You can make it for entire page/site.

* {
     /* CSS lines go here */
}

Or you can make it so only targeted content will have it using Class or ID selectors.

#text-no-select {
     /* ID selector -  CSS lines go here */
}

.text-no-select {
     /* Class selector -  CSS lines go here */
}

Be aware this does not totally prevent anyone from copying content on a website. There are many other ways to go around this or even with a Javascript impementation. It is a minor roadblock.

Javascript(Typescript) Generic Api Call Service

I’m building a SSR application with React and Next js and this application will communicate with with the Rest service already created. Application must send request to Rest service on both client side and server side. So I have to create one ApiCall service works both client side and server side. I tried build something but I think its not good.

ApiCall.ts

export function apiCall<T extends BaseQuery>(
 query: T,
 options?: UseQueryOptions<T>,
 ctx?: GetServerSidePropsContext
): QueryResult<T> {
    const [data, setData] = GState()(null);
    const [error, setError] = GState()(null);
    const [loading, setLoading] = GState()<Boolean>(true);

    const headersWithToken = headers(TOKEN.get(ctx.req));
    const variables: any = options.variables;

    const queryP = query(variables, headersWithToken)
    .then((respData) => {
       setData(respData);
       setLoading(false);
       return respData;
    })
    .catch((e) => {
       setLoading(false);
       setError("ERROR");
    });

    return {
       data: data,
       error: error,
       loading: loading,
       query: queryP,
   };
}

GState.ts Closure

const GState = function () {
   let _val;

   function useState<T>(initialValue: T) {
     _val = _val || initialValue;

     function setState(newVal: T) {
        _val = newVal;
     }

     function getState(): T {
       return _val;
     }
     return [getState, setState];
   }
return useState;
};

export default GState;

Api endpoints

const getCredit = (headers: {}) => Promise<ICreditResponse> = (headers) => {
  return ApiService.setHeaders(headers).getReq({
    route: "/credits/my",
    isPrivate: true,
  });
};

const healthCheckReq = (headers: {}) => Promise<string> = (headers) => {
  const apis = ApiService;
  return apis.getReq({ route: `/health`, isPrivate: false });
};

const getMerchantShippingDays = (
  s: {
    merchantId: string;
  },
  headers: {}
) => Promise<IShippingDaysResponse> = ({ merchantId }, headers) =>
    ApiService.setHeaders(headers).getReq({
      route: `/shippingDays/merchant/${merchantId}`,
      isPrivate: true,
});

Example Usage :

export default function Health({ health }: HealthProps) {

  const { data: getHealthData, loading: getHealthLoading } = apiCall(
     queryEndpoints.healthCheckReq,
     { variables: { id: "1" } }
  );

  const __ = (
     <AppContainer>
        <Container fluid>
           {!getHealthLoading() && getHealthData().map(data => 
              <Row>{data.id}</Row>
           )}
       </Container>
    </AppContainer>
 );

  return __;
}

export const getServerSideProps: GetServerSideProps = async (
  ctx: GetServerSidePropsContext
  ) => {
     const { data: healthData, loading: healthLoading, query } = apiCall(
       queryEndpoints.healthCheckReq,
       { variables: { id: "1" } },
       ctx
    );

    await query;

    return { props: { health: healthData } };
};

I need advice for that api service. How can I improve that or if I don’t need this service how can I do request to rest service with generic functions

Go to Source
Author: zblash