IE10 clear button

by logankd

HTML

<input type="search" id="input1" data-bind="value: textForBox, valueUpdate: 'afterkeydown',
  event: { input: cleared }" />
<br /><span data-bind="text: textForBox" />

<br />
<span>Using Hafthor's from Stackoverflow approach</span><br />
<input type="search" id="input2" data-bind="value: textForBox, valueUpdate: 'input'" />
<br /><span data-bind="text: textForBox" />

CSS

input.nobutton::-ms-clear {
    display: none;
}

JavaScript

// http://stackoverflow.com/questions/14700466/attach-event-to-clear-icon-in-ie10-textbox
//document.getElementById('input1').addEventListener('input', function () {
//    if (this.value === '') {
//        alert('No value');
//    }
//}, false);

var vm = {
    textForBox: ko.observable(),
    cleared: function (data, event) {
        if (event.currentTarget.value === '') {
           this.textForBox('');
        }
    }
};
//vm.textForBox.subscribe(function (newValue) {
//});
ko.applyBindings(vm);