x-webkit-speech: onwebkitspeechchange is not reset

Question

I'm trying to reset my input value with onwebkitspeechchange event so that only speech text remains in value.

onclick on little mic removed the text

after click dialog pop up and value reset to initial text

Code:

<input name="s" type="text" x-webkit-speech="" id="s" value="What are you looking for?" onfocus="if (this.value == 'What are you looking for?') {this.value = '';}" onwebkitspeechchange="if (this.value == 'What are you looking for?') {this.value = '';}" onblur="if (this.value == '') {this.value = 'What are you looking for?';}">

I know that onblur event is doing this but how can I make an exception for onwebkitspeechchange so only speech reamain?

can't use placeholder attribute (doesn't work in ie 9)

Answer 1

I ran into the same problem and got it working with a simple JS function. Here's my solution:

<input x-webkit-speech="x-webkit-speech" onwebkitspeechchange="webkitSpeechChange(this);" name="myinput" value="<?php echo $this->__('Search entire store here...') ?>" class="search-query" />
<script type="text/javascript">
    //<![CDATA[
    function webkitSpeechChange(input) {
        input.value = input.value.replace('<?php echo $this->__('Search entire store here...') ?>', '');
    }
    //]]>
</script>

where <?php echo $this->__('Search entire store here...') ?> should be your default value.

Hope this helps :)