Question

我正在使用一个Kendo编辑框，用户可以输入SQL连接字符串的不同部分（服务器名称，数据库，用户名和密码）。我还有一个文本框，可以在用户输入时向用户显示整个连接字符串。

我的问题是，当用户将数据输入到每个文本框时，如何将四个文本框（服务器，数据库，用户和密码）中的每一个数据绑定到一个文本框。

此外，用户请求了单独的字段。

提前致谢， Dan Plocica

Answer 1

使用Kendo UI进行操作将是：

HTML：

<div id="form">
    <label>Server : <input type="text" class="k-textbox" data-bind="value: server"></label><br/>
    <label>Database : <input type="text" class="k-textbox" data-bind="value: db"></label><br/>
    <label>User : <input type="text" class="k-textbox" data-bind="value: user"></label><br/>
    <label>Password : <input type="password" class="k-textbox" data-bind="value: password"></label><br/>

    <div id="connections" data-bind="text: connection"></div>
</div>

JavaScript的：

$(document).ready(function () {
    var model = kendo.observable({
        server    : "localhost:1521",
        db        : "database",
        user      : "scott",
        password  : "tiger",
        connection: function () {
            return this.get("user") + "/" +
                    this.get("password") + "@" +
                    this.get("server") + ":" +
                    this.get("db");
        }
    });
    kendo.bind($("#form"), model);
});

在HTML中有两部分：

输入文件，我将每个输入定义到它在模型中绑定的字段。
一个div我在我的模型中找到了connection函数的文本，该文本根据不同的值创建了一个字符串。

这会自动更新，您可以自由编辑每个输入。

你可以装饰input，因为我把它的CSS类设置为k-textbox，这是可选的。唯一重要的是data-bind="value : ..."。

JavaScript，只是使用我们想要的字段和方法创建和Observable对象。

在此处运行示例：http://jsfiddle.net/OnaBai/xjNMf/

Answer 2

我将使用jQuery JavaScript库编写解决方案，您应该使用jQuery，因为它更容易阅读，也避免了不同浏览器中的错误。

**HTML**
Server: <input type="text" id="server"/><br/>
Database: <input type="text" id="database"/><br/>
Username: <input type="text" id="username"/><br/>
Password: <input type="text" id="password"/><br/>
<br/>
Full CS: <input type="text" id="solution"/><br/>

<强> JS

<script type="text/javascript">
   var _template = 'Data Source=%server%;Initial Catalog=%db%;Persist Security Info=True;User ID=%user%;Password=%pass%';

   $(document).ready(function(){
       $('#server,#database,#username,#password').keyup(function(){ updateSolution();});

    });
     function updateSolution(){
      var _t = _template.replace('%server%', $('#server').val()).replace('%db%', $('#database').val()).replace('%username%', $('#username').val()).replace('%pass%', $('#password').val());

       $('#solution').val(_t);
     };
</script>

数据绑定多个文本框以显示在一个文本框中

2 个答案: