hybridWebView页面在Xamarin.Forms

时间:2017-10-29 17:24:39

标签: javascript c# xamarin xamarin.forms

我目前正在解决哪些Xamarin家伙在this link提供的解决方案 我基本上想要用户输入4位数的PIN码,然后在提交按钮上,它应该被转移到用代码隐藏写的登录页面。 这是我用JS的HTML:

<html>
<head>
<style>
    .phone-field {
        margin: 50px;
        font-size: 20px;
    }
    .phone-input {
        width: 13px;
        text-align: center;
        font-size: 16px !important;
        height: 1.75em;
        border: 0;
        outline: 0;
        background: transparent;
        border-bottom: 2px solid #ddd;
        margin-right: 2px;
        margin-left: 2px;
    }

    [placeholder]:focus::-webkit-input-placeholder {
        transition: opacity 0.5s 0.0s ease;
        opacity: 0;
    }
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<div class="phone-field">
    <form>
        <input class="phone-input" id="one" name="phone-input" size="1" maxlength="1" placeholder="">
        <input class="phone-input" id="two" name="phone-input" size="1" maxlength="1" placeholder="">
        <input class="phone-input" id="three" name="phone-input" size="1" maxlength="1" placeholder="">
        <input class="phone-input" id="four" name="phone-input" size="1" maxlength="1" placeholder="">
        <input type="submit" onclick="javascript:invokeCSCode($('#one').val()+$('#two').val()+$('#three').val()+$('#four').val());" value="submit">
    </form>
</div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('body').on('keyup', 'input.phone-input', function () {
            var key = event.keyCode || event.charCode;
            var inputs = $('input.phone-input');
            if (($(this).val().length === this.size) && key != 32) {
                inputs.eq(inputs.index(this) + 1).focus();
            }
            if (key == 8 || key == 46) {
                var indexNum = inputs.index(this);
                if (indexNum != 0) {
                    inputs.eq(inputs.index(this)).val('').focus();
                    inputs.eq(inputs.index(this) - 1).focus();
                }
            }

        });
    });

</script>
    <script type="text/javascript">
        $('.inputs').keyup(function () {
            if (this.value.length == this.maxLength) {
                $(this).next('.inputs').focus();
            }
        });
        function log(str) {
            $('#result').text($('#result').text() + " " + str);
        }

        function invokeCSCode(data) {
            try {
                log("Sending Data:" + data);
                invokeCSharpAction(data);
            }
            catch (err) {
                log(err);
            }
        }
    </script>
</body>

我看到一条被称为C#的行(throgh JSBridge):

hybridWebView.RegisterAction (data => DisplayAlert ("Alert", "Hello " + data, "OK"));

我试过而不是这一行来放置:

hybridWebView.RegisterAction(data => new PageNext());

但它没有用。

基本上,我需要从javascript调用新页面。

1 个答案:

答案 0 :(得分:0)

尝试将新的PageNext页面推送到导航堆栈,如下所示:

hybridWebView.RegisterAction(data => Navigation.PushAsync (new PageNext()));

或者您可以尝试在RegisterAction中使用Navigation.PushModalAsync (new PageNext());,如果您的页面应该像模式一样显示。