javascript – Andrew Choi, My Knowledge Blog

Javascript gets today’s date in ISO format and is not affected by time zone

// Get today's date
let today = new Date();
today.setUTCHours(0, 0, 0, 0);

let isoDate = today.toISOString().substring(0, 10);
console.log(isoDate);

Result:
2023-04-18

javascript input box filter sample

<input type="text" v-on:keypress="
        let letterNumber = /^[0-9a-z_]+$/;
        let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
        let text = String.fromCharCode(keyCode);
        if (! text.match(letterNumber)) {
            $event.preventDefault();
        }
">

VueJS: How to output a comma separated array?

source: René Roth (2018), https://stackoverflow.com/questions/42129534/vuejs-how-to-output-a-comma-separated-array

If all you care about is comma separation, use Javascript’s built-in join method:

{{ list.join(', ') }}

For arrays of objects, you could do something like this:

{{ list.map(entry => entry.title).join(', ') }}

Filter input text only accept number and dot vue.js

Source : Mengseng Oeng (2018), https://stackoverflow.com/questions/39782176/filter-input-text-only-accept-number-and-dot-vue-js

HTML

 <input @keypress="onlyNumber" type="text">

VUE JS

onlyNumber ($event) {
   //console.log($event.keyCode); //keyCodes value
   let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
   if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
      $event.preventDefault();
   }
}

Automatically set text box to Uppercase, Support alphabet and Number only?

<input type="text" oninput="this.value=this.value.replace(/[^A-Z0-9]/gi,'').toUpperCase()">

自己實作js array prototype unique function

自己寫一個js array prototype unique function

Array.prototype.unique = function()
{
    var n = []; 
    for(var i = 0; i < this.length; i++) 
    {
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}

var arr = ["a","b","c","b","d","a","c","c"];

console.log(arr.unique());
//輸出["a", "b", "c", "d"]

WYSIWYG js Editor

Editor.js https://editorjs.io/

CKEditor https://ckeditor.com/

Quilljs https://quilljs.com/

Prosemirror https://prosemirror.net/

Tiptap https://tiptap.dev/

Fixed jscolor.js not work with Vue updated by AJAX color value

For example:

We got some data form AJAX and the valuable is “topBGColor”.

in HTML

<input data-jscolor="">

add ref="topBGColor"

<input data-jscolor="" ref="topBGColor">

in Javascript (After get ajax value)

let topBGColor = "#ff0000";

this.$refs.topBGColor.style = 'background-image: linear-gradient(to right, '+topBGColor+' 0%, '+topBGColor+' 30px, rgba(0, 0, 0, 0) 31px, rgba(0, 0, 0, 0) 100%) !important; background-position: left top, left top !important; background-size: auto, 32px 16px !important; background-repeat: repeat-y, repeat-y !important; background-origin: padding-box, padding-box !important; padding-left: 40px !important;';

js read the URL parameters

edit test.html

<div id="test"></div>

<script>
  const p = new URLSearchParams(window.location.search);
  if (p.has('y')) {
    year = parseInt(p.get('y'), 10);
    document.getElementById("test").innerHTML = year;
  }
</script>

test.html?y=1000

result:
1000

javascript detect input box PRESS ENTER

<input type="number" id="year" step="1" min="-3500" max="3500" />

<script>
var input = document.getElementById("year");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    <Do something>
  }
});
</script>