Lompat ke konten Lompat ke sidebar Lompat ke footer

Melakukan Pemotongan Konten HTML Menggunakan Atribut Oncut

Atribut oncut akan bereaksi ketika user melakukan cut atau delete konten, dimana konten tersebut akan ditampilkan pada elemen. Atribut oncut merupakan atribut bertipe boolean yang hanya terdiri dari dua jenis input TRUE dan FALSE. Atribut oncut digunakan oleh semua jenis elemen HTML tetapi agak sulit untuk memiliki elemen oncut yang memiliki atribut ContentEditable yang disetting dalam tipe TRUE.

2 Contoh Program Penerapan Atribut Oncut pada File HTML
Ilustrasi Atribut Oncut HTML

Sebelum memahami lebih dalam materi tentang Melakukan Pemotongan Konten HTML Menggunakan Atribut Oncut, terlebih dahulu pelajari materi tentang: Melakukan Copy Elemen HTML File Menggunakan Atribut Oncopy [klik], Menonaktifkan Fokus Elemen HTML Menggunakan Atribut Onblur [klik], dan Menonaktifkan Validasi HTML Menggunakan Atribut Novalidate [klik].

Catatan: terdapat tiga cara untuk melakukan cut pada konten dari elemen html.
  • Tekan CTROL + X pada keyboard.
  • Pilih "CUT" pada menu Edit pada browser.
  • Klik kanan dan pilih perintah "Cut".

Sintak:
<element oncut = "script">

Atribut: merupakan bagian dari atribut event dan dapat digunakan pada elemen html apapun, dimana script dapat dijalankan ketikan atribut oncut tersebut dipanggil.

Baca Juga: 

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Oncut

</title>

 

<style>

body 

{

text-align:center;}

 

h1 

{

color:green;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Atribut Oncut pada Elemen Input

</h2>

 

<input 

type = "text

oncut = "mkn()"

value = "Blog Elfan: Merupakan portal ilmu komputer">

 

<p id = "sudo"></p>

 

<script>

function Bons() 

{

document.getElementById("sudo").innerHTML = "Cut the text!";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Atribut Oncut pada Elemen Input


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Oncut

</title>

 

<style>

body 

{

text-align:center;}

 

h1 

{

color:green;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Atribut Oncut pada Elemen Input

</h2>

 

<

contenteditable = "true

oncut = "mkn()">

Blog Elfan: Merupakan portal ilmu komputer.

</p>

 

<script>

function mkn() 

{

alert("Cut the text!");

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Atribut Oncut pada Elemen Input

Blog Elfan: Merupakan portal ilmu komputer.


Artikel ini didedikasikan kepada: Nadia Putri Kustriani, Priansyah Rizky Revindo, Revilda Dwi Ananda Lestiyani, Rizkynia Farah Dhiva, dan Satrio Piningit.

5 komentar untuk "Melakukan Pemotongan Konten HTML Menggunakan Atribut Oncut"

  1. Bagaimana cara aktivasi atribut oncut pada elemen html?

    BalasHapus
    Balasan
    1. Atribut oncut pada html dapat diaktivasi ketika user melakukan cut pada suatu konten elemen html.

      Hapus
  2. Kenapa elemen oncut tidak bisa diaktivasi ada elemen html?

    BalasHapus
    Balasan
    1. Meskipun atribut oncut didukung penggunaannya oleh semua elemen html, namun tidak semua elemen dapat dilakukan cut menggunakan atribut oncut, kecuali elemen tersebut telah melakukan setting conteneditable dengan nilai TRUE.

      Hapus
    2. Jika konten editable bernilai false, maka konten elemen tidak bisa dilakukan cut pada file html.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -