diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index 23ad77252393c55bd70c2e84aec12c87e167d137..27b54306d4445d60ca5b80dd4cb279b4cbfe61d2 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -278,7 +278,7 @@ export default class AutoRotation {
 
         if (this.directionHandler) {
             const keyboardEle = document.getElementById('keyboardInputContent');
-            const currentDisplay = keyboardEle.style.display;
+            const currentDisplay = keyboardEle?.style?.display;
             this.directionHandler.update(this.orientation, this.displayBox, currentDisplay);
         }
     }
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index 05f0180c6e7fef6e22307c95135940b34f46ca45..752132157e6b7a9bba653ffe88cb4e8c943a8bf3 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -63,14 +63,16 @@ class DirectionHandler {
                 let ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
                 let ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;
                 this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
-                this.keyboardInputContent.style.cssText = `
+                if (this.keyboardInputContent) {
+                    this.keyboardInputContent.style.cssText = `
                     display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
                     position: absolute;
                     bottom: 5px;
                     left: 0px;
                     height: 0px;
                     width: 10px;
-                `;
+                    `;
+                }
                 break;
             case PROTOCOL_CONFIG.ORIENTATION[16]:
                 const keyboardInputLeft = this.containerEle.clientWidth;
@@ -95,14 +97,16 @@ class DirectionHandler {
                 let ctrlEleLeft = this.ctrlEle.clientWidth/2;
                 let ctrlEleTop = this.netWorkInfo.clientHeight * 2.5;
                 this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
-                this.keyboardInputContent.style.cssText = `
+                if (this.keyboardInputContent) {
+                    this.keyboardInputContent.style.cssText = `
                     display: ${this.currentDisplay ? this.currentDisplay : 'none'};
                     position: absolute;
                     top: 50%;
                     left: 0px;
                     height: 40px;
                     width: 100%;
-                `;
+                    `;
+                }
                 break;
             case PROTOCOL_CONFIG.ORIENTATION[16]:
                 const keyboardInputLeft = this.containerEle.clientWidth;
@@ -595,15 +599,16 @@ class DirectionHandler {
             border-radius: 5px;
             transform: translate(-50%, -50%);
         `;
-
-        this.keyboardInputContent.style.cssText = `
+        if (this.keyboardInputContent) {
+            this.keyboardInputContent.style.cssText = `
             display: none;
             position: absolute;
             bottom: 5px;
             left: 0px;
             height: 40px;
             width: 100%;
-        `;
+            `;
+        }
 
         const left = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
         const top = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;