Category: JavaScript

Sometimes, we want to disable text selection while pressing shift with JavaScript.

In this article, we’ll look at how to disable text selection while pressing shift with JavaScript.

Disable Text Selection While Pressing Shift with JavaScript

To disable text selection while pressing shift with JavaScript, we can set the document.onselectstart property to a function that returns false.

To do this, we write:

window.onload = () => {  
  document.onselectstart = () => {  
    return false;  
  }  
}

to set the document.onselectstart property to a function that returns false .

Now the user won’t be able to select anything on the screen.

We put the code in the window.onload method to make sure that the DOM is loading before we set onselectstart .

Conclusion

To disable text selection while pressing shift with JavaScript, we can set the document.onselectstart property to a function that returns false.

Sometimes, we want to draw a dotted line in the HTML Canvas with JavaScript.

In this article, we’ll look at how to draw a dotted line in the HTML Canvas with JavaScript.

Draw a Dotted Line in the HTML Canvas with JavaScript

To draw a dotted line in the HTML Canvas with JavaScript, we can use the setLineDash or mozDash method.

For instance, we write:

<canvas width='200' height='200'></canvas>

to create the canvas.

Then we write:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
if (ctx.setLineDash !== undefined) {
  ctx.setLineDash([5, 10]);
}
if (ctx.mozDash !== undefined) {
  ctx.mozDash = [5, 10];
}
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "green";
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);
ctx.stroke();

to get the canvas and its 2d context with:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

Then we call setLineDash or mozDash to set the line style to a dashed line.

Next, we call beginPath to start drawing.

Then we set the width and stroke styles with:

ctx.lineWidth = "2";
ctx.strokeStyle = "green";

Then we use moveTo to move to the point where the line starts.

Then we use lineTo to set the point where the line ends.

And finally, we call stroke to draw the line into the canvas.

Conclusion

To draw a dotted line in the HTML Canvas with JavaScript, we can use the setLineDash or mozDash method.

Sometimes, we want to generate a sequence of numbers or characters in JavaScript.

In this article, we’ll look at how to generate a sequence of numbers or characters in JavaScript.

Generate a Sequence of Numbers or Characters in JavaScript

To generate a sequence of numbers or characters in JavaScript, we can create our own function.

For instance, we write:

const makeArray = (count, content) => {
  const result = [];
  if (typeof content === "function") {
    for (let i = 0; i < count; i++) {
      result.push(content(i));
    }
  } else {
    for (let i = 0; i < count; i++) {
      result.push(content);
    }
  }
  return result;
}

const arr1 = makeArray(8, 1);
console.log(arr1)

const arr2 = makeArray(8, (i) => {
  return i * 3;
});
console.log(arr2)

We create the makeArray function that takes the count and content parameters.

count has the number of entries in the array.

content has the content we want to add, which can be generated from a function or any value.

In the function, we initialize result to an empty array.

Then we check if content is a function with typeof .

If it is, then we use a for loop to push the entries returned by content to result .

Otherwise, we push content into result directly with another for loop.

Therefore, arr1 is [1, 1, 1, 1, 1, 1, 1, 1] .

And arr2 is [0, 3, 6, 9, 12, 15, 18, 21] .

Conclusion

To generate a sequence of numbers or characters in JavaScript, we can create our own function.

Sometimes, we want to convert a JavaScript array to object keys.

In this article, we’ll look at how to convert a JavaScript array to object keys.

Convert a JavaScript Array to Object Keys

To convert a JavaScript array to object keys, we can use the JavaScript array’s reduce method to return an object with the array entries as keys.

To do this, we write:

const arr = ['a', 'b', 'c'];
const res = arr.reduce((acc, curr) => (acc[curr] = '', acc), {});
console.log(res)

We call arr.reduce with a callback that adds the object keys to the acc object parameter.

Then we return the acc object after that.

curr has the arr entries that are being iterated through.

And we set each property’s value to an empty string.

The comma operator always returns the last item in the list, so acc is returned in the callback.

The 2nd argument is an empty object, so we set acc to an empty object initially.

Therefore, res is:

{a: "", b: "", c: ""}

Conclusion

To convert a JavaScript array to object keys, we can use the JavaScript array’s reduce method to return an object with the array entries as keys.

Sometimes, we want to detect focus initiated by tab key with JavaScript.

In this article, we’ll look at how to detect focus initiated by tab key with JavaScript.

Detect Focus Initiated by Tab Key with JavaScript

To detect focus initiated by tab key with JavaScript, we can listen to the keyup event.

And if the keyup event is triggered by a tab key and the input is focused, then we know the focus is triggered by the tab key.

For instance, we can write:

<input type="text" id="foo" />  
<input type="text" id="detect" />

to add the inputs.

Then we can detect whether the input with ID detect is focused by pressing the tab key by writing:

$(window).keyup((e) => {  
  const code = (e.keyCode ? e.keyCode : e.which);  
  if (code === 9 && $('#detect:focus').length) {  
    console.log('I was tabbed!');  
  }  
});

We call keyup on window with an event listener.

In the event listener, we check if the keyCode is 9, which is the key code for the tab key.

And we also check if there’s an element with ID detect that is focused with $(‘#detect:focus’).length .

If both are true , then we know it was focused by pressing tab.

Conclusion

To detect focus initiated by tab key with JavaScript, we can listen to the keyup event.

And if the keyup event is triggered by a tab key and the input is focused, then we know the focus is triggered by the tab key.