webview_searchInput.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Search Input</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  11. <script>
  12. var ws = null;
  13. // H5 plus事件处理
  14. function plusReady(){
  15. ws = plus.webview.currentWebview();
  16. ws.addEventListener('titleNViewSearchInputChanged', function(e){
  17. console.log('titleNViewSearchInputChanged: '+JSON.stringify(e));
  18. document.getElementById('search').innerText = e.text;
  19. }, false);
  20. ws.addEventListener('titleNViewSearchInputConfirmed', function(e){
  21. console.log('titleNViewSearchInputConfirmed: '+JSON.stringify(e));
  22. doSearch(e.text);
  23. }, false);
  24. ws.addEventListener('titleNViewSearchInputFocusChanged', function(e){
  25. console.log('titleNViewSearchInputFocusChanged: '+JSON.stringify(e));
  26. }, false);
  27. }
  28. document.addEventListener('plusready', plusReady, false);
  29. // 更新搜索文本
  30. var bText = false;
  31. function changeText(){
  32. var t = bText?'':'修改后的搜索文本';
  33. bText = !bText;
  34. ws.setTitleNViewSearchInputText(t);
  35. }
  36. // 获取搜索文本
  37. function getText(){
  38. console.log('searchInput: '+ws.getTitleNViewSearchInputText());
  39. }
  40. // 执行搜索操作
  41. var wbaidu = null;
  42. function doSearch(txt){
  43. if(wbaidu){ // 避免快速点击打开
  44. return;
  45. }
  46. var url = 'https://m.baidu.com/s?word='+txt;
  47. wbaidu = plus.webview.create('https://m.baidu.com/s?word='+txt, 'baidu', {
  48. backButtonAutoControl: 'close',
  49. popGesture: 'close',
  50. progress: {
  51. color: '#00CC00',
  52. height: '3px'
  53. },
  54. titleNView: {
  55. autoBackButton: true,
  56. backgroundColor: '#D74B28',
  57. titleText: txt,
  58. titleColor: '#CCCCCC'
  59. }
  60. });
  61. wbaidu.addEventListener('close', function(e){
  62. wbaidu = false;
  63. ws.setTitleNViewSearchInputFocus(true);
  64. }, false);
  65. ws.setTitleNViewSearchInputFocus(false);
  66. wbaidu.show('pop-in');
  67. }
  68. </script>
  69. </head>
  70. <body>
  71. <br/>
  72. <p>搜索示例页面</p>
  73. <br>
  74. <div class="button" onclick="changeText()">修改搜索文本</div>
  75. <div class="button" onclick="getText()">获取搜索文本</div>
  76. <br/>
  77. <p style="color:#FF0000;" id="search"></p>
  78. <br/>
  79. </body>
  80. </html>