Found 2202 Articles for HTML

HTML DOM KeyboardEvent getModifierState( ) Method

AmitDiwan
Updated on 30-Jul-2019 22:30:26

211 Views

The getModifierState() method returns true/false if the provided modifier key was pressed or not.SyntaxFollowing is the syntax −Calling getModifierState() with parameter as modifier keyevent.getModifierState(“modifierKey”)Modifier KeysHere, “modifierKey” can be the following −modifierKeyAltAltGraphCapsLockControlMetaNumLockScrollLockShiftExampleLet us see an example for getModifierState() method − Live Demo KeyboardEvent getModifierState()    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } KeyboardEvent getModifierState( ) Password: ... Read More

HTML DOM KeyboardEvent code Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

96 Views

The KeyboardEvent code property returns the key identifier corresponding to the key pressed using an event.Note − Use key property instead for accurate resultsSyntaxFollowing is the syntax −Returning latest typed character’s code −event.codeExampleLet us see an example for KeyboardEvent code property − Live Demo KeyboardEvent code    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } KeyboardEvent-code Press a ... Read More

HTML DOM KeyboardEvent charCode Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

123 Views

The KeyboardEvent charCode property returns the unicode character codes corresponding to character that was pressed using an event.Note − Use key property instead for accurate resultsSyntaxFollowing is the syntax −Returning latest typed character’s charCode −event.charCodeExampleLet us see an example for KeyboardEvent charCode property − Live Demo KeyboardEvent charCode    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } KeyboardEvent-charCode Fill ... Read More

HTML DOM Kbd Object

AmitDiwan
Updated on 30-Jul-2019 22:30:26

124 Views

The Kbd Object represents an inline element which displays monospace font by default.SyntaxFollowing is the syntax −Creating a elementvar kbdObject = document.createElement(“KBD”)ExampleLet us see an example for Kbd object element − Live Demo Kbd Object    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } Kbd Object Keyboard Input:    var divDisplay = document.getElementById("divDisplay");    var textSelect = document.getElementById("textSelect");    function convertKBD() {       var kbdObject = document.createElement("KBD");       var kbdText = document.createTextNode(textSelect.value);       kbdObject.appendChild(kbdText);       divDisplay.appendChild(kbdObject);    } OutputThis will produce the following output −Before clicking ‘Check’ button −After clicking ‘Check’ button −

HTML DOM Italic Object

AmitDiwan
Updated on 30-Jul-2019 22:30:26

191 Views

The HTML DOM Italic Object represents an element which displays text in italic.SyntaxFollowing is the syntax −Creating an elementvar italicObject = document.createElement(“I”)ExampleLet us see an example for Italic object element − Live Demo Italic Object    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } Italic Object Formatter:    var divDisplay = document.getElementById("divDisplay");    var textSelect = document.getElementById("textSelect");    function convertItalic() {       var italicObject = document.createElement("I");       var italicText = document.createTextNode(textSelect.value);       italicObject.appendChild(italicText);       divDisplay.appendChild(italicObject);    } OutputThis will produce the following output −Before clicking ‘Check’ button −After clicking ‘Check’ button −

HTML DOM insertAdjacentHTML( ) Method

AmitDiwan
Updated on 30-Jul-2019 22:30:26

294 Views

The HTML DOM insertAdjacentHTML() method inserts text string as HTML at a specified position.SyntaxFollowing is the syntax −Calling insertAdjacentHTML() with parameters of positionString and HTML codenode.insertAdjacentHTML(“positionString”, “htmlString”)Position StringsHere, “positionString” can be the following −positionStringDescriptionafterbeginIt inserts htmlString after the beginning of node elementafterendIt inserts htmlString after the node elementbeforebeginIt inserts htmlString before the node elementbeforeendIt inserts htmlString before the end of node elementHtml Stringsand, “htmlString” can be the following −positionStringnew span or This is a new paragraphor any other valid html codeExampleLet us see an example for InsertAdjacentHTML() method − Live Demo insertAdjacentHTML()    form {       ... Read More

HTML DOM ins dateTime Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

103 Views

The HTML DOM ins dateTime property returns the date and time for when the text was inserted.SyntaxFollowing is the syntax −Returning string valueinsObject.dateTimeExampleLet us see an example for ins dateTime property − Live Demo ins dateTime    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } ins-dateTime Fact: Water cannot persist on moon's surface. Water ice found on ... Read More

HTML DOM ins cite Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

127 Views

The HTML DOM ins cite property returns the URL of a document that reasons why text was inserted.SyntaxFollowing is the syntax −Returning string valueinsObject.citeExampleLet us see an example for ins cite property − Live Demo ins cite    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } ins-cite Fact: Water cannot persist on moon's surface.Water ice found on moon ... Read More

HTML DOM InputEvent Object

AmitDiwan
Updated on 30-Jul-2019 22:30:26

216 Views

The InputEvent Object represents all the events that correspond to content change of a form element.PropertiesHere, “InputEvent” can have the following properties/methods −Property/MethodDescriptiondataIt returns the string corresponding to inserted characterdataTransferIt returns an object containing information about the interested/deleted datagetTargetRanges()Returns an array containing target ranges that will be affected by the insertion/deletion.inputTypeIt returns the type of inputisComposingIt returns the state of the eventExampleLet us see an example for InputEvent data property − Live Demo InputEvent Data    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {   ... Read More

HTML DOM InputEvent inputType Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

113 Views

The HTML DOM InputEvent inputType property returns the input type of event triggered.SyntaxFollowing is the syntax −Returning latest typed character in text field −event.inputTypeExampleLet us see an example for InputEvent inputTypeproperty − Live Demo InputEvent inputType    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } InputEvent-inputType Action teller:    var divDisplay = ... Read More

Advertisements