tRikSonic
Tema
  • Original
  • Translate

HTML spellcheck Attribute

Terakhir diperbarui : 8 April 2018 - 09.30

Tutorial Attribute spellcheck

Attribute spellcheck digunakan untuk menentukan apakah teks pada element perlu di cek tata bahasanya atau tidak. Didalam Tampilan browser jika attribute ini digunakan biasanya teks yang dianggap salah, akan diberi tanda garis merah bergelombang atau sejenisnya.

Attribute Value

AttributeValueDeskripsi
spellchecktrue dan falsemenentukan teks perlu diperiksa atau tidak perlu diperiksa tata bahasanya

Contoh Attribute spellcheck

<textarea spellcheck="true">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</textarea>

<textarea spellcheck="false">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</textarea>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<textarea spellcheck="true">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</textarea>

<textarea spellcheck="false">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</textarea>

<p>
Klik pada masing masing textarea,
dan perhatikan pada teks yang salah <b>Createeeee</b>
</p>

<p>
Demo ini untuk browser yang pengaturan browsernya menggunakan bahasa inggris.
</p>

<p>
Jika anda menggunakan Bahasa Indonesia, ganti isi textarea dengan Kalimat yang berbahasa Indonesia
</p>

</body>
</html>
* {
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}
p {
    margin-top: 0;
    margin-bottom: 10px;
}
textarea {
    width: 100%;
    min-height: 75px;
    resize: none;
    margin-bottom: 10px;
    display: block;
    border-color: #93adff;
    padding: 10px;
}
//javascript

Contoh Attribute spellcheck

<div contenteditable spellcheck="true">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</div>

<div contenteditable spellcheck="false">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<div contenteditable spellcheck="true">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</div>

<div contenteditable spellcheck="false">
Blogger.com - Createeeee a unique and beautiful blog. It's easy and free.
</div>

<p>
<strong>KLIK</strong> dan edit pada masing masing editable diatas,
dan perhatikan pada teks yang salah (<b>Createeeee</b>)
</p>

<p>
Demo ini untuk browser yang pengaturan browsernya menggunakan bahasa inggris.
</p>

<p>
Jika browser anda menggunakan Bahasa Indonesia, ganti isi editable di editor dengan Kalimat yang berbahasa Indonesia
</p>

</body>
</html>
* {
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}
p {
    margin-top: 0;
    margin-bottom: 10px;
}
div[contenteditable] {
    min-height: 75px;
    max-height: 150px;
    overflow: auto;
    resize: none;
    margin-bottom: 10px;
    display: block;
    border: 1px solid #cec7c7;
    padding: 15px;
    background: #fcffeb;
    border-radius: 5px;
    outline-color: #b20edc;
}
//javascript

Browser Support :

AttributeChromeSafariFirefoxOperaIE / Edge
spellcheck9.05.12.010.510.1
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.