Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

如何用avalon让输入框自动获取焦点 #495

Closed
lankeren opened this issue Sep 23, 2014 · 11 comments
Closed

如何用avalon让输入框自动获取焦点 #495

lankeren opened this issue Sep 23, 2014 · 11 comments

Comments

@lankeren
Copy link
Contributor 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Focus Demo</title>
    <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.js"></script>
</head>
<body>
    <input type="text" id="target">
    <button id="focus-btn">Foucs</button>
    <label for="target">Foucs</label>
    <script>
        $('#focus-btn').click(function(){
            $('#target').focus();
        })
    </script>
</body>
</html>

如果想让一个输入框获取焦点，可以像上面那样，利用label的for属性，或者使用jquery的focus，假如想在刷新页面或者切换tab页时让一个输入框自动获取焦点，如何用avalon实现？
@RubyLouvre
Copy link
Owner

input.focus()

@wf123537200
Copy link

美大，input.focus是啥意思哈？是dom操作么？
如果需要执行click函数的时候给input设置焦点，这个怎么做呢？
谢谢！

@RubyLouvre
Copy link
Owner

avalon也是这样实现啊

@RubyLouvre
Copy link
Owner

avalon不处理让元素获得焦点，需要自己处理

@RubyLouvre
Copy link
Owner

1.36我增加一个配置项吧

<!DOCTYPE html>
<html>
    <head>
        <title>by 司徒正美</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <style>
            input:focus{
                border: 1px solid green;
            }
        </style>
        <script>
            var model = avalon.define({
                $id: "test",
                text: "aaa",
                change: function() {
                    model.text = new Date - 0
                }
            })


        </script>

    </head>
<body>
    <div ms-controller="test">
        <input ms-duplex="text" data-duplex-focus="true"/>{{text}}
        <button type="button" ms-click="change">ddd</button>
    </div>
</body>

@wf123537200
Copy link

非常感谢美大。

@jinwei233
Copy link

我也需要这个功能

@jinwei233
Copy link

更新到1.3.6 已经可用了

<input ms-duplex="text" ms-data-duplex-focus="isfocus()"/>

@RubyLouvre
Copy link
Owner

No description provided.

@jinwei233
Copy link

用 ms-bind 是可以实现获取 dom 并调用 dom 元素方法的：

<input ms-duplex="text" ms-bind="text:isfocus"/>

vm.isfocus = function(a,b){
  var input = this;
  input.focus();
}

为什么去掉了 ms-bind 了？

@RubyLouvre
Copy link
Owner

1.0之前就去掉了

@RubyLouvre RubyLouvre mentioned this issue Oct 24, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@RubyLouvre @jinwei233 @lankeren @wf123537200