sondmk header
เรียนรู้การเขียน JavaScript เบื้องต้น

Javascript : Substr , substring

Post by Goborijung at 2021-06-15 11:39:16 | ID: 1246

ref : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_substr

<script>
function myFunction() {
  var str = "Hello world!";
  var res = str.substr(1, 4);
  document.getElementById("demo").innerHTML = res;
}
</script>
Javascript : Toggle password visibility , show hide password

Post by Goborijung at 2021-06-07 23:44:24 | ID: 1232

ref : https://htmldom.dev/toggle-password-visibility/

<input type="password" id="password" />
<button id="toggle">Toggle</button>

<script>
// Query the elements
const passwordEle = document.getElementById('password');
const toggleEle = document.getElementById('toggle');

toggleEle.addEventListener('click', function() {
    const type = passwordEle.getAttribute('type');
    
    passwordEle.setAttribute(
        'type',
        // Switch it to a text field if it's a password field
        // currently, and vice versa
        type === 'password' ? 'text' : 'password'
    );
});
</script>
Javascript : Auto Submit

Post by Goborijung at 2020-05-12 09:14:07 | ID: 540

<form name='frm1' action='' method='post'>
</form>

<script>			
	setTimeout('document.frm1.submit.click()',3000);
</script>
Javascript : Copy highlighted code to the clipboard , Copy code or text to Clipboard | copy code

Post by Goborijung at 2021-06-07 23:50:55 | ID: 1233

ref : https://htmldom.dev/copy-highlighted-code-to-the-clipboard/

<pre id="sampleCode"><code>xxx555</code></pre>
<button id="copyButton">Copy</button>

<script>
// Query the elements
const copyButton = document.getElementById('copyButton');
const codeEle = document.getElementById('sampleCode');

copyButton.addEventListener('click', function() {
    const selection = window.getSelection();

    // Save the current selection
    const currentRange = selection.rangeCount === 0
        ? null : selection.getRangeAt(0);

    // Select the text content of code element
    const range = document.createRange();
    range.selectNodeContents(codeEle);
    selection.removeAllRanges();
    selection.addRange(range);

    // Copy to the clipboard
    try {
        document.execCommand('copy');
        copyButton.innerHTML = 'Copied';
    } catch (err) {
        // Unable to copy
        copyButton.innerHTML = 'Copy';
    } finally {
        // Restore the previous selection
        selection.removeAllRanges();
        currentRange && selection.addRange(currentRange);
    }
});
</script>
Javascript : Get key Enter

Post by Goborijung at 2020-06-13 09:44:33 | ID: 614

<!DOCTYPE html>
<html>
<body>

<h3>Trigger Button Click on Enter</h3>
<p>Press the "Enter" key inside the input field to trigger the button.</p>

<input id="myInput" value="Some text..">
<button id="myBtn" onclick="javascript:alert('Hello World!')">Button</button>

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

</body>
</html>
Javascript : paste an image from clipboard using JavaScript | past image

Post by Goborijung at 2021-03-31 06:44:13 | ID: 1071

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.onpaste = function(pasteEvent) {
  // consider the first item (can be easily extended for multiple items)
  var item = pasteEvent.clipboardData.items[0];
 
  if (item.type.indexOf("image") === 0) {
    var blob = item.getAsFile();
 
    var reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById("container").src = event.target.result;
    };
 
    reader.readAsDataURL(blob);
  }
}
</script>

</head>
<body>

<p>Paste your image here..</p>
<img id="container"/>

</body>
</html>
Javascript : Put cursor at the end of an input , put end cursor

Post by Goborijung at 2021-06-08 18:53:54 | ID: 1236

ref : https://htmldom.dev/put-cursor-at-the-end-of-an-input/

<input type="text" id="fullName" />
<button id="edit">Edit</button>

<script>
const fullNameEle = document.getElementById('fullName');
const editEle = document.getElementById('edit');

editEle.addEventListener('click', function(e) {
    // Focus on the full name element
    fullNameEle.focus();

    // Move the cursor to the end
    const length = fullNameEle.value.length;
    fullNameEle.setSelectionRange(length, length);
});
</script>
Javascript : Set Current Time (set time interval)

Post by Goborijung at 2021-03-26 13:28:29 | ID: 1061

<div id="time"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<script>
function realtime() {
  
  let time = moment().format('H:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('H:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();
</script>
Javascript : Validate Input Number Only (บังคับให้ใส่ได้เฉพาะตัวเลขเท่านั้น)

Post by Goborijung at 2021-06-08 23:50:23 | ID: 1237

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ele = document.getElementById('input');
    const state = {
        value: ele.value,
    };

    ele.addEventListener('keydown', function(e) {
        const target = e.target;
        state.selectionStart = target.selectionStart;
        state.selectionEnd = target.selectionEnd;
    });

    ele.addEventListener('input', function(e) {
        const target = e.target;

        if (/^[0-9s]*$/.test(target.value)) {
            state.value = target.value;
        } else {
            // Users enter the not supported characters
            // Restore the value and selection
            target.value = state.value;
            target.setSelectionRange(state.selectionStart, state.selectionEnd);
        }
    });
});
</script>
Javascript : คำสั่ง Print แนวนอน

Post by Goborijung at 2020-08-11 10:16:30 | ID: 710

<style type="text/css" media="print">
  @page { size: landscape; }
</style>
Description
<button onclick="window.print() ;">Print</button>
<<<12345>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com