Champ de texte HTML sur toile élément

J'ai été jouer avec le texte dans la toile, et bien c'est facile à dessiner, il n'est pas facile d'interagir avec. J'ai commencé la mise en œuvre du clavier appuyez sur la fonctionnalité de mise à jour du texte sur le canevas, mais alors abandonné quand j'ai réalisé que j'aurais à intégrer les couper,de copier,de passé et de la fonction annuler.

Est-il de toute façon à "flotter" éléments html sur eachother? Par exemple puis-je faire flotter un champ de texte ontop de certaines parties de ma toile, désactiver la frontière et définissez la couleur à la couleur de la toile?

Merci

  • CSS float serait pour vous
  • Non, CSS float est pour la réalisation des éléments enrouler autour d'autres éléments. Il n'a rien à voir avec "flottante" des éléments sur d'autres éléments. Vous pensez peut-être de z-index ou le positionnement absolu.
  • yess, chris a souligné dans la réponse ci-dessous. Merci
InformationsquelleAutor puk | 2011-03-11
  1. 18

    Vous pouvez utiliser le CSS position: absolute propriété avec z-index: 1 de placer les éléments au-dessus de la toile.

    EDIT: ajout d'un exemple: ici, la div qui contient "1234" flotte sur le dessus de la div qui contient des "abcd" (qui pourrait être remplacé par un élément canvas)

    <div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>
    • Merci. Mais que dire de la suggestion Charlie a Fait au-dessus de l'utilisation d'une propriété CSS Float" qui est mieux, pire, de la même manière?
    • Je ne pense pas que les éléments flottants va les empiler les uns des autres. Vous avez besoin de la position: absolute ou position: fixed pour atteindre cet objectif.
    • Aussi comment pourrais-je ajouter des attributs CSS dynamiquement? Je suis de la création du champ dynamiquement comme <champ=document.createElement('texte')>, mais je ne peux pas obtenir ma tête autour de la façon d'ajouter des propriétés css pour elle.
    • si le champ est une référence à votre nouvel élément, vous pouvez écrire field.style.property = value; en Javascript.
    • Ou field.setAttribute("style", "contents of the style attribute").
    • Chris, j'ai changé mon approche, j'ai donc quelques <div> éléments avec des champs de texte en eux, et je les cacher et de les utiliser quand il le faut, à la place de la création dynamique d'eux (j'ai couru dans des problèmes d'insertion dynamique dans mon document, il a jeté une erreur de hiérarchie). Mais je n'arrive pas à modifier les propriétés css. Par exemple, <champ.setAttribute('color','white');> ne changera pas le champ de texte, couleur de police blanche. Est-il un "reload" commande-je utiliser? Cheers
    • Pour changer la couleur, vous pouvez utiliser field.setAttribute("style", "color: white") si la couleur est la seule propriété CSS de l'élément. Ou, sur le terrain.style.color = "white".
    • Notez que le JS versions de propriétés CSS à utiliser camelCase à la place des pointillés cas. C'est-à-dire, où vous utiliseriez background-color: #fff en CSS, vous pouvez utiliser field.style.backgroundColor = "#fff" en JS.
    • J'ai effectivement lu ça quelque part d'autre. Juste pour être sur le côté sûr, je vais rester avec setAttribute

    InformationsquelleAutor ChrisJ
  2. 2

    Vous pouvez utiliser 'd'une certaine façon" invisible texte-contrôle de prendre le contrôle sur le texte en cours de saisie et de copier innerHTML sur la toile, sur pression de touche. Im faire les mêmes choses, la copie calculée police css attributs de texte présents dans les DOM et plus. Z-index de travail assez simple. La fonction setFocus() peut aider trop.

    InformationsquelleAutor tomasb