1

最初に、私は jQuery モバイルやあらゆるタイプのモバイル開発に不慣れだと言って始めましょう。ただし、Phonegap を使用する Icenium を使用してアプリを構築しています。私のアプリはかなりうまく動作しますが、理解できないことが 2 つあります。

  1. 入力ボタンと対話する方法、つまり、私のボタンのようにクリックハンドラーを起動します。
  2. ユーザーがテキスト ボックスをクリックしたときにすべてのテキストを強調表示する方法。したがって、キーパッドの戻るキーを使用する必要はありません。

さまざまな用語をグーグルで検索してみましたが、何も見つからないようです。問題は、jQuery という単語を何にでも入れると、結果が狂ってしまうことです。

ここに私のHTMLがあります。

<body>
  <div data-role="page" id="home">
    <div data-role="header">
      <div id='SearchInput'>
        <label for="txtSearchTerm">Search For a Session</label>
        <input type="text" id="txtSearchTerm" value="" />
        <input type="button" id="btnFilterSessions" value="Filter Sessions" />
        <span id="sessionCount"></span>
      </div>
    </div>
    <div data-role="content">
      <ul id="sessionsList"></ul>
    </div>
    <div data-role="footer" data-position="fixed" data-id="oneFooter">
      <span class="footerText">@r0k3t</span>
    </div>
  </div>

これが私の完全なJSです。

document.addEventListener("deviceready", onDeviceReady, false);
var codeMashApp = {};
function listSessions(sessions) {
  $("#sessionsList").empty();
  sessions.each(function() {
    var title = $(this).find('Title').text();
    var uri = $(this).find('URI').text();
    $("#sessionsList").append("<li class='sessionTitle'><a href='#detailsPage' id='" + uri + "' data-transition='slide'>" + title + "</a></li>");
  });
  $("#sessionCount").text("Number of sessions: " + sessions.length);
}
function onDeviceReady() {
  $.ajax({
    type: "GET",
    url: "http://rest.codemash.org/api/sessions",
    data: "{}",
    success: function(d) {
      codeMashApp.rootElement = d.documentElement;
      var sessions = $(codeMashApp.rootElement).find("Session");
      listSessions(sessions);
    }
  });
  $("#btnFilterSessions").click(searchSessions);
}
function searchSessions() {
  var searchTerm = $("#txtSearchTerm").val();
  if (searchTerm) {
    var sessions = $(codeMashApp.rootElement).find("Title:contains(" + searchTerm + ")").parent();
    listSessions(sessions);
  } else {
    reloadAllSessions()
  }
}
function reloadAllSessions() {
  var sessions = $(codeMashApp.rootElement).find("Session");
  listSessions(sessions);
}
4

2 に答える 2

2

ブラウザが標準のフォームの動作を適用するように、ページを標準の html フォームのように見せる必要があります。フォーム タグ内にテキスト ボックスとボタンを配置しinput type="submit"、一般的なボタンの代わりに使用します。

選択については、 フォーカスを受け取ったときにテキストボックスのすべてのコンテンツを選択する (JavaScript または jQuery) を参照してください。

于 2012-11-26T04:10:06.227 に答える
2

モバイルには Enter キーはありません。ただし、テキストフィールドをタップすると、キーボードがポップアップします。キーボードには「Go」ボタンがあります。それを押すと、Enter キーである ascii 13 の keypress イベントが発生します。

通常どおりにプログラムを作成し、Enter のキー押下イベントを通常どおりにキャッチするだけです。PC ブラウザーでは、ユーザーが Enter キーを押すとイベントがアクティブになりますが、モバイルでは、ユーザーが [Go] ボタンを押すとイベントが発生します。

これは、backbonejs アプリに対して行うことです。すべてのテキストフィールドでEnterキーを押すためのキャッチオールを作成し、そこから、Enterキーを押したときにフルネームのテキストフィールドでdbの値を更新して、aを押さずにAJAXを介してそのフィールドのみを更新できるようにします。送信ボタン:

$(document).on('keypress', 'input', function(event) {   
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        //alert('You pressed a "enter" key in somewhere');  

        alert("DEBUG: ENTER KEY PRESSED!"); 
        var element = event.currentTarget;
        var id = $(element).attr("id");

       if (id == "fullname") {
            $(event.currentTarget).trigger('enter');
            var text = $(event.currentTarget).val();
            localStorage.setItem("memberprofileupdatetype", "fullname");
            localStorage.setItem("memberprofilenameupdate", text);              
            event.preventDefault();
       }
    }
});

このコード:

$(event.currentTarget).trigger('enter');

バックボーンビューで Enter keypress イベントをトリガーするので、これを実行して更新を実行します。

events: {
    'enter': 'processUpdate'
},

processUpdate: function() {
    var updatetype = localStorage.getItem("memberprofileupdatetype");
    if (updatetype == "fullname") {
        var newname = localStorage.getItem("memberprofilenameupdate");
        localStorage.removeItem("memberprofileupdatetype");
        localStorage.removeItem("memberprofilenameupdate");

        alert("New name - " + newname);
        //do AJAX update here for the newname
    }
}

これはハックに少し似ていますが、Enter キーのバックボーン coz に対してできることは何もありません。その方法でのみ実行できます。

于 2016-10-20T12:07:08.390 に答える