Colar texto no navegador Safari usando o Web SDK - Cloud Phone: Central de Documentação do Alibaba Cloud

A política de segurança do Safari bloqueia leituras programáticas da área de transferência e aciona uma janela pop-up nativa de confirmação sempre que o SDK tenta sincronizar a área de transferência local com o Cloud Phone. Este guia mostra como implementar uma caixa de diálogo personalizada de área de transferência para permitir que os usuários colem texto em uma sessão do Cloud Phone sem acionar essa restrição.

Visão geral da solução

Adicione um botão personalizado de área de transferência à interface do cliente local. O clique nesse botão abre uma caixa de entrada pop-up.
O usuário cola o conteúdo que deseja enviar ao Cloud Phone na caixa de entrada pop-up.
O clique em Paste Now na janela pop-up sincroniza o conteúdo com a área de transferência do Cloud Phone e com seu campo de entrada ativo.

Configure os parâmetros do SDK

Defina os seguintes parâmetros em connConfig antes de criar a sessão. Ambos são obrigatórios para o funcionamento do fluxo personalizado de área de transferência.

Parâmetro	Valor	Finalidade
`readClipboardDataByUser`	`isSafari()`	Desativa a leitura automática da área de transferência pelo SDK no Safari, permitindo controlar quando os dados da área de transferência são enviados
`useCustomIme`	`true`	Ativa o Editor de Método de Entrada (IME) local, necessário para inserir conteúdo no campo de entrada ativo do Cloud Phone

// Detect Safari by checking the user agent
function isSafari() {
    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}

// Main control configuration
connConfig = {..., readClipboardDataByUser: isSafari(), useCustomIme: true};
var appInfo = {
    ...,
    connConfig: connConfig,
    ...
};
var sessionParam = {
    ...,
    appInfo: appInfo,
    ...
};
var wuyingSdk = Wuying.WebSDK;
session = wuyingSdk.createSession('appstream', sessionParam);

// Thumbnail configuration — also requires useCustomIme
this.thumbnail = new window.Wuying.ThumbnailSDK(
    {
        ...,
        connectionConfig: {
            useCustomIme: true,
        },
    },
    {
        onConnected: (data) => {
            this.thumbnail.session.getLocalConfig().setClipboardEnabled(true);
        },
        onDisConnected: (data) => {},
        onThumbnailData: (url) => {},
    }
);

Crie a caixa de diálogo da área de transferência

Adicione um botão de área de transferência à sua interface. Ao clicar nele, o usuário abre uma caixa de diálogo modal onde pode colar texto e enviá-lo ao Cloud Phone.

Crie a caixa de diálogo

function showInput() {
    showCustomDialog();

    // Close the dialog when clicking outside it
    document.querySelector('.modal-overlay').addEventListener('click', function (e) {
        if (e.target === this) {
            closeModal();
        }
    });

    // Close the dialog on Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
}

function closeModal() {
    console.log('closeModal');
    const overlay = document.querySelector('.modal-overlay');
    if (overlay) {
        overlay.style.display = 'none';
        overlay.remove();
    }
}

function showCustomDialog() {
    // Create the modal overlay
    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay';
    overlay.style.pointerEvents = 'all';
    overlay.style.zIndex = '9999';

    // Prevent keyboard events from reaching underlying UI elements
    const stopPropagation = function(e) {
        e.stopPropagation();
    };
    overlay.addEventListener('contextmenu', stopPropagation, true);
    overlay.addEventListener('keydown', stopPropagation, true);
    overlay.addEventListener('keyup', stopPropagation, true);
    overlay.addEventListener('keypress', stopPropagation, true);

    overlay.innerHTML = `
        <div class="modal">
            <div class="modal-header">
                <h2 class="modal-title">Clipboard</h2>
                <button class="close-btn" onclick="closeModal()">×</button>
            </div>
            <div class="input-container">
                <textarea
                    class="input-field"
                    placeholder="Enter content"
                    maxlength="500"
                ></textarea>
            </div>
            <button class="submit-btn" onclick="submitContent()">
                Paste Now
            </button>
        </div>
    `;

    document.body.appendChild(overlay);

    // Focus the textarea so keyboard events are captured immediately
    setTimeout(() => {
        const textarea = overlay.querySelector('.input-field');
        if (textarea) {
            textarea.focus();
        }
    }, 100);
}

Enviar o texto para o Cloud Phone

Quando o usuário clica em Paste Now, as funções a seguir validam a entrada e a sincronizam com a área de transferência e o campo de entrada ativo do Cloud Phone.

function submitContent() {
    const content = document.querySelector('.input-field').value.trim();
    if (!content) {
        alert('Please enter content');
        return;
    }
    // Sync content to the Cloud Phone
    sendMsgToCloudPhoneOperation(content);
    closeModal();
}

function sendMsgToCloudPhoneOperation(msg) {
    // Main control session
    if (session) {
        session.setClipboardModule('sendClipboardDataToRemote', msg);
    }
    // Thumbnail sessions
    for (const [key, value] of thumbnailSDKMap) {
        console.log('thumbnail sendMsgToCloudPhoneOperation ', key, msg);
        value.thumbnail.session.getClipboardModule().sendClipboardDataToRemote(msg);
    }
}

Tratamento de eventos de teclado

A sobreposição modal deve interceptar todos os eventos de teclado com stopPropagation antes que alcancem outros elementos da página. Caso contrário, as teclas digitadas na caixa de diálogo serão capturadas pela interface subjacente em vez da área de texto, interrompendo a entrada normal de texto.

overlay.addEventListener('contextmenu', stopPropagation, true);
overlay.addEventListener('keydown', stopPropagation, true);
overlay.addEventListener('keyup', stopPropagation, true);
overlay.addEventListener('keypress', stopPropagation, true);