最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Knockout.js valueUpdate not working when user uses keyboard - Stack Overflow

programmeradmin2浏览0评论

Im using Knockout.js and ASP.NET. My HTML is as follows:

<div class="InputField">
    Fixed/Floating
    <div class="FieldContainer">
        <select data-bind="options: $root.FixedLoanOptions, selectedOptions: IsFixed, valueUpdate: 'change'" ></select>
    </div>
</div>

If the user uses the mouse to select the item, the JSON es back to the server with the updated information. But if the user uses "tab" to tab onto the select control, select an item, and tab off, then even though the selected item is displayed on the UI, the JSON es back with a blank value for this control.

It seems that the Knockout view model does not update if the user uses the keybord only, there seems to be some change event that happens specifically in the browser when the user uses the mouse.

How can I fix this? Is there a way I can register the select boxes onchange event to use a function that updates the Knockout model manually?

I've tried it in both IE9 and Firefox and I have the same problem in both.

Im using Knockout.js and ASP.NET. My HTML is as follows:

<div class="InputField">
    Fixed/Floating
    <div class="FieldContainer">
        <select data-bind="options: $root.FixedLoanOptions, selectedOptions: IsFixed, valueUpdate: 'change'" ></select>
    </div>
</div>

If the user uses the mouse to select the item, the JSON es back to the server with the updated information. But if the user uses "tab" to tab onto the select control, select an item, and tab off, then even though the selected item is displayed on the UI, the JSON es back with a blank value for this control.

It seems that the Knockout view model does not update if the user uses the keybord only, there seems to be some change event that happens specifically in the browser when the user uses the mouse.

How can I fix this? Is there a way I can register the select boxes onchange event to use a function that updates the Knockout model manually?

I've tried it in both IE9 and Firefox and I have the same problem in both.

Share Improve this question asked May 8, 2012 at 23:48 333Mhz333Mhz 9193 gold badges10 silver badges21 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 2

What does the rest of your code look like? How is the AJAX call being made?

This example of modifying a select with the keyboard works OK for me on IE and Firefox:

http://jsfiddle/mikebridge/yYS7c/2/

You could change the event when knockoutjs updates the model to blur which is triggered more.

<div class="InputField">
    Fixed/Floating
    <div class="FieldContainer">
        <select data-bind="valueUpdate: 'blur', options: $root.FixedLoanOptions, selectedOptions: IsFixed" ></select>
    </div>
</div>

As you can see on Live example Knockout update model only when select option is selected:

  • Mouse click
  • Pressed enter button afret selecting by keyboard arrow buttons.

Binding the valueUpdate to 'keyup' did the trick for me. Does not affect changes done with the mouse, so looking good so far.

So something like this should work:

<div class="InputField">
    Fixed/Floating
    <div class="FieldContainer">
        <select data-bind="valueUpdate: 'keyup', options: $root.FixedLoanOptions, selectedOptions: IsFixed" ></select>
    </div>
</div>
发布评论

评论列表(0)

  1. 暂无评论